Cara membuat Web GIS dengan metode array

Pada kesempatan kali ini, belajar coding akan memberikan tutorial atau langkah-langkah cara membuat web gis dengan metode array. Tutorial kali ini merupakan lanjutan dari postingan sebelumnya yaitu cara membuat dan memasang google maps API dan PHP. Baiklah langsung saja kita masukk ke penjelasanya :

Langkah-langkah Sebagi Berikut :

1. Siapkan data titik koordinat lokasi yang akan di tampilkan.Buka link http://maps.google.com untuk mendapatkan titik koordinat.

2. Pilih salah tempat untuk mendapatkan titik koordinatnya. caranya klik kiri pada salah satu tempat yang ada di google maps tersebut tetapi tidak tepat pada lempat yang di pilih.

3. Klik angka pada menu yang tampil pada layar bawah.

4. kemudian akan tampil data lengkap mengenai lokasi yang telah di pilih tadi dan copy titik koordinat berupa angka desimal simpan data titik koordinat tersebut dalam notepad atau aplikasi lainnya.

5. Setelah data titik koordinat sudah didapat buat index.html dan masukkan source codenya sebagai berikut : (NB: jangan Lupa ganti API KEY nya pada code yang berwarna merah pada akhir index.html)

<!DOCTYPE html>
<html>
<head>
<title>Praktikum 1</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<style>
#map{/* modifikasi element html yang ber-id map*/
height: 100%;
}
html, body{
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
// DATA koordinat dalam bntuk array
//(nama,tempat,garis)
var locations = [
["Indomaret",-3.790693, 114.776747],
["Alfamat",-3.789294, 114.776128],
["Agape",-3.794267, 114.782559]
];
map = new google.maps.Map(document.getElementById('map'),{
center: {lat: -3.7990165, lng: 114.779605},
zoom: 10
});
//inisialisasi marker dan infowindow kosong
var marker;
var infowindow = new google.maps.InfoWindow();
for (var i=0; i<locations.length; i++) { // lakukan perulangan untuk load dari array
marker = new google.maps.Marker({
position : new google.maps.LatLng(locations[i][1],locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i){
return function() {
infowindow.setContent(""+locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AlzaSyD4Afn7Jv0ntkWyCwFH_ecXHk3VoEvO2_A&callback=initMap" async defer></script>
</body>
</html>

6. Inilah tampilan akhir dari index.htmlnya

Itulah tutorial cara membuat web GIS dengan metode array semoga dapat bermanfaat dan menambah ilmu pengetahuan kita jika terdapat kritik dan saran silahkan berikan komentar kalian pada kolom komentar, Terima Kasih...!!!

Cara membuat Web GIS dengan metode array