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 ...

Menampilkan multiple marker Google Maps API

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map-canvas {
        width: 500px;
        height: 500px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <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);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Hasilnya kurang lebih akan seperti ini:

Hasil Akhir

 

Ya sekian dari tutorial kali ini. Semoga bermanfaat! Happy Codings!


About Author

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.


Comment & Discussions

  • Rivalda Endarsa
    bagaimana cara untuk memasukkan nya ke wordpress??

  • Alharis M Chaniago
    script ini bisa nggak digabung dengan script Geolocation gan? jadi sekaligus nampilkan titik marker, sekalian juga menampilkan posisi saat ini sesuai GPS.. mohon pencerahannya..

  • Please LOGIN before if you want to give the comment.