Kesempatan kali ini, saya akan membahas sesuatu yang sudah lama tapi masih tetap dipakai hingga sekarang, yakni mengenai google map versi web menggunakan javascript. Saat ini saya belum membahas mengenai clustering atau pengelompokan, mungkin di kesempatan lain akan saya bahas. Anda bisa memanfaatkan untuk menampilkan misal penyebaran karyawan menurut GPS, sebaran kantor cabang dari restoran anda, dan lain-lain.
Saya akan mencontohkan menggunakan developer mode, yakni tanpa menggunakan KEY. Namun, bila anda ingin menerapkan ke dalam web, hukumnya wajib untuk menggunakan KEY. Saya mencontohkan menggunakan beberapa lokasi di Pulau Jawa dengan centernya terletak pada new google.maps.LatLng(-7.27, 109.70). Berikut ini adalah 6 langkah untuk menampilkan banyak lokasi (marker) pada google map javascript.
- Tambahkan script gmap pada html anda sebelum </body>
<script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&libraries=&v=weekly" async ></script> - Buat function InitMap(), yakni konfigurasi awal saat peta muncul. Nama fungsi ini berelasi dengan callback yang ada pada script point 1.
- Menentukan center map, yakni kondisi awal saat memuat peta. Seperti pada pernyataan di atas, saya set di Pulau Jawa. Kondisi ini saya beri nama variabel map.
- Buat array yang menampung koordinat lokasi dan juga label. Pada code ini, saya beri nama locations.
- Jangan lupa untuk mendeclare inforwindow dan marker. Info window berfungsi untuk menampilkan informasi saat melakukan klik pada marker. Pada contoh ini, saya hanya menampilkan judul saja (Lokasi A, Lokasi B, dst).
- Terapkan lokasi tersebut ke dalam marker dengan melakukan looping.
Berikut ini merupakan contoh full kode yang saya buat pada tahap development. Kode ini bisa dikembangkan lagi untuk dihubungkan dengan API, atau kita juga bsa mengembangkan apabila ke depan memerlukan clustering atau pengelompokan data.
<!DOCTYPE html>
<html>
<head>
<title>Multiple Marker</title>
<style type="text/css">
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(-7.27,109.70),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var locations = [
['Lokasi O', -7.2748766,109.8085842],
['Lokasi N', -7.1748766,109.7885842],
['Lokasi M', -7.2748766,109.0585842],
['Lokasi L', -7.1748766,109.1485842],
['Lokasi K', -7.2748766,109.2385842],
['Lokasi J', -7.3748766,108.7285842],
['Lokasi I', -7.0748766,108.9085842],
['Lokasi H', -7.4748766,109.0095842],
['Lokasi G', -7.5748766,109.9085842],
['Lokasi F', -7.9748766,109.7985842],
['Lokasi E', -7.2748766,109.7085842],
['Lokasi D',-7.2798766,109.7085842],
['Lokasi C',-7.2748766,109.9085842],
['Lokasi B', -7.8748766,109.7085842],
['Lokasi A', -7.2798766,109.7085842],
];
var infowindow = new google.maps.InfoWindow();
var marker;
for (i = 0; i < locations.length; i++) {
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=&callback=initMap&libraries=&v=weekly"
async
></script>
</body>
</html>
Selamat Mencoba
