Menampilkan multiple marker Google Maps API Oleh: Hasyemi Rafsanjani Asyari
Masih berhubungan dengan Google Maps, kali ini saya akan mengajarkan bagaimana menampilkan banyak marker pada map. Kalau pada sebelumnya kita menampilkan banyak marker dengan menggunakan mouse click, kali ini kita akan menampilkan secara bersamaan, dalam sekali load page. Ceritanya contohnya disini ...
Masih berhubungan dengan Google Maps, kali ini saya akan mengajarkan bagaimana menampilkan banyak marker pada map. Kalau pada sebelumnya kita menampilkan banyak marker dengan menggunakan mouse click, kali ini kita akan menampilkan secara bersamaan, dalam sekali load page. Ceritanya contohnya disini adalah kita ingin tahu letak gunung-gunung di Indonesia, tapi tidak semua, dikit aja ya haha. Seperti biasa untuk persiapannya, hanya butuh text editor biasa. Untuk menampilkan banyak marker, maka kita membutuhkan banyak koordinat dari marker. Disini kita gunakan array untuk menampung koordinat dari marker-marker atau lokasi-lokasi dari gunung-gunung tersebut.
Membuat Array Markers Pertama mari kita buat array yang berisi koordinat lokasi gunung-gunungnya. Disini saya masukin 8 gunung di daerah jawa ya. var markers = [ ['Taman Nasional Gunung Gede Pangrango', -6.777797700000000000 , 106.948689100000020000], ['Gunung Papandayan', -7.319999999999999000, 107.730000000000020000], ['Gunung Cikuray', -7.3225, 107.86000000000001], ['Gunung Bromo', -7.942493600000000000, 112.953012199999990000], ['Gunung Semeru', -8.1077172, 112.92240749999996], ['Gunung Merapi', -7.540717500000000000, 110.445724100000000000],
['Gunung Merbabu', -7.455000000000001000, 110.440000000000050000], ['Gunung Prau', -7.1869444, 109.92277779999995] ]; untuk yang bertanya bagaimana nyari koordinat dari lokasi-lokasinya? Simple! googling aja dengan keyword latitude dan longitude lokasi yang mau dicari. haha :D Disini kita buat array dengan 8 tempat. Terdapat 3 indeks, indeks pertama nama lokasi, kedua adalah latitude, dan yang ketiga adalah longitude. Indeks ini akan digunakan nanti ketia di looping saat akan menampilkan marker ke dalam maps.
Menampilkan Array Marker dengan looping Selanjutnya seperti cara biasa kita tampilkan marker ke dalam maps. Perbedaannya kali ini adalah kita gunakan looping, sebanyak index atau size dari array kita. var infowindow = new google.maps.InfoWindow(), marker, i; // kita buat beberapa variabel untuk keperluan looping. for (i = 0; i < markers.length; i++) { // loop sebanyak size dari array pos = new google.maps.LatLng(markers[i][1], markers[i][2]); marker = new google.maps.Marker({ position: pos, map: map }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(markers[i][0]); infowindow.open(map, marker); } })(marker, i)); } Penjelasan dari script diatas cukup mudah dan simple jika kalian teliti dan cermat. Didalam looping ada dua hal kita lakukan yaitu menambahkan markers dan juga menambahkan info window ke dalam marker tersebut. Yang perlu kalian pahami adalah, pertama untuk markers, position dari markers diambil dari array (markers[i][1], markers[i][2]). Seperti yang sebelumnya saya katakan, indeks 1 dan 2 adalah untuk Lat dan Long. Sama halnya dengan info window, kita gunakan indeks 0. (Ingat! array dimulai dari 0 guys! :) )
Membuat Map menampilkan semua markers. Maksudnya apa ya? Maksudnya disini adalah kita buat agar maps kita tidak tampil dalam satu lokasi tertentu saja, seperti di tutorial sebelumnya, mapnya terbatas hanya di Depok saja, jadi ketika ada markers diluar itu, kita tidak bisa melihatnya. Istilahnya maps mencakupi atau melingkupi
marker-marker kita. Kita sebut properties atau fungsi Google Maps ini dengan Bounds. Bounds, boundaries, batasan. Yah seperti itulah pokonya. Kita tambahkan script berikut: var bounds = new google.maps.LatLngBounds(); // diluar looping bounds.extend(pos); // di dalam looping map.fitBounds(bounds); // setelah looping
Source Code Lengkap <style> #map-canvas { width: 500px; height: 500px; } <script src="https://maps.googleapis.com/maps/api/js"> <script> var markers = [ ['Taman Nasional Gunung Gede Pangrango', -6.777797700000000000 , 106.948689100000020000], ['Gunung Papandayan', -7.319999999999999000, 107.730000000000020000], ['Gunung Cikuray', -7.3225, 107.86000000000001], ['Gunung Bromo', -7.942493600000000000, 112.953012199999990000], ['Gunung Semeru', -8.1077172, 112.92240749999996], ['Gunung Merapi', -7.540717500000000000, 110.445724100000000000], ['Gunung Merbabu', -7.455000000000001000, 110.440000000000050000], ['Gunung Prau', -7.1869444, 109.92277779999995] ]; function initialize() { var mapCanvas = document.getElementById('map-canvas'); var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(mapCanvas, mapOptions) var infowindow = new google.maps.InfoWindow(), marker, i; var bounds = new google.maps.LatLngBounds(); // diluar looping for (i = 0; i < markers.length; i++) { pos = new google.maps.LatLng(markers[i][1], markers[i][2]); bounds.extend(pos); // di dalam looping marker = new google.maps.Marker({
position: pos, map: map }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(markers[i][0]); infowindow.open(map, marker); } })(marker, i)); map.fitBounds(bounds); // setelah looping } }
google.maps.event.addDomListener(window, 'load', initialize);
Hasilnya kurang lebih akan seperti ini:
Ya sekian dari tutorial kali ini. Semoga bermanfaat! Happy Codings! :)
Tentang Penulis Hasyemi Rafsanjani Asyari null. I'm proud to be Stalker. Currently Mahasiswa Politeknik Negeri Jakarta. Currently Microsoft Student Partners Indonesia Regional Jabodetabek. Founder of a Company.
