Press "Enter" to skip to content

Tutorial Google Maps – Menampilkan Multimarker di Google Maps

Pada artikel kali ini saya akan menjelaskan tutorial Google Maps tentang bagamana cara menampilkan multimarker di Google Maps. Marker yang dimuncul akan ditampilkan dengan ikon yang berbeda-beda sesuai dengan kategori atau kriteria lokasi tersebut.

Markercluster

Selain itu juga kita akan menambahkan fitur Marker Cluster pada peta. Markercluster adalah sebuah fitur dimana marker yang tampil pada peta akan dikelompokan saat mencapai jumlah tertentu, hal ini dimaksudkan agar marker yang muncul tidak akan terlalu menumpuk di peta.

Caranya adalah dengan menampung semua marker yang akan kita tampilkan kedalam sebuah array dengan menggunakan looping lalu kita gunakan fungsi dari MarkerCluster tersebut.

Pertama kita membutuhkan library yang dibutuhkan untuk menampilkan markercluster di Google Maps. Kamu bisa menggunakan library dari mahnunchik. Ini adalah library markercluster yang dibangun untuk Google Maps versi 3.

Selain itu kamu juga dapat menggunakan library yang sudah saya taruh di source code yang bisa kamu unduh di akhir artikel ini.

Infowindow

Selain Markercluster, kita juga akan menggunakan fitur Infowindow untuk menampilkan informasi yang ada di marker tersebut ketika user mengklik marker tersebut di peta.

Perlu diketahui bahwa cara ini menggunakan PHP dan MySQL untuk menggunakan fitur yang sudah kita bahas sebelumnya.

Contoh kasus ini bisa kita gunakan jika kita ingin menampilkan multimarker di Google Maps dengan jumlah yang sanat banyak.

Sekarang kita buka text editor dan ketikkan script seperti ini

<html>
  <head>
    <title></title>
    <script src="https://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script src="assets/js/jquery.js" type="text/javascript"></script>
    <script src="assets/js/markerclusterer_packed.js" type="text/javascript"></script>
    <script type="text/javascript">
      var peta;
      var nama = new Array();
      var kategori = new Array();
      var alamat = new Array();
      var x = new Array();
      var y = new Array();
      var i;
      var url;
      var gambar_tanda;

      function peta_awal() {
        var purwakarta = new google.maps.LatLng(-6.538174427323609,
        107.44945527392576); 
        var myStyles = [{
          featureType: "point",
          elementType: "labels",
          stylers: [{
            visibility: "off"
          }]
        }];
        var petaoption = {
          zoom: 11,
          center: purwakarta,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          styles: myStyles
        };
        peta = new google.maps.Map(document.getElementById("map_canvas"),
        petaoption);
        ambildatabase(); 
      }

      function ambildatabase() {
        var markers = [];
        var info = []; 
        <?php
        $link = mysql_connect('localhost', 'root', '');
        mysql_select_db('googlemaps_multiicon', $link);
        $query = mysql_query(
          "SELECT `a`.*,`b`.* FROM `lokasi` AS `a` LEFT JOIN `kategori` AS `b` ON `a`.`kategori` = `b`.`id`");
        $i = 0;
        $js = '';
        while ($value = mysql_fetch_assoc($query)) {
          $js. = 'nama['.$i.
          '] = "'.$value['nama'].
          '"; 
          kategori['.$i.'] = "'.$value['nama_kategori'].'";
          alamat['.$i.'] = "'.$value['alamat'].'";
          x['.$i.'] = "'.$value['latittude'].'";
          y['.$i.'] = "'.$value['longitude'].'";

          set_icon("'.$value['ikon'].'"); // kita set dulu koordinat markernya 
          var point = new google.maps.LatLng(parseFloat(x['.$i.']), parseFloat(y['.$i.']));

          
          var contentString = "<table>" + "<tr>" + "<td><b>" + nama['.$i.'] + "</b></td>" + "</tr>" + "<tr>" + "<td>" +
            alamat['.$i.'] + "</td>" + "</tr>" + "</table>";

          var infowindow = new google.maps.InfoWindow({
            content: contentString
          });

          tanda = new google.maps.Marker({
            position: point,
            map: peta,
            icon: gambar_tanda,
            clickable: true
          });

          markers.push(tanda);
          info.push(infowindow);

         
          google.maps.event.addListener(markers['.$i.'], "click", function () {
            info['.$i.'].open(peta, markers['.$i.']);
          });
          '; 
          $i++;
        }

      
        echo $js; 
?>
       
        var markerCluster = new MarkerClusterer(peta, markers);
      }
     
      function set_icon(ikon) {
        if (ikon == "") {

        } else {
          gambar_tanda = "assets/icon/" + ikon;
        }
      }
    </script>
  </head>

  <body>
    <h3>GOOGLEMAPS MULTI ICON</h3>
    <div id="map_canvas" style="width: 100%; height: 550px;"></div>
  </body>

</html>

PERHATIAN : Script diatas menggunakan versi Google Maps lama dan belum mengikuti kebijakan baru dari Google Maps.

Dari script diatas, output yang dihasilkan akan seperti dibawah ini

Tutorial Google Maps - Menampilkan Multimarker di Google Maps

Output diatas menampilkan beberapa marker yang kita ambil dari database MySQL. Didalam tabel tersebut setiap lokasi memiliki gambar ikon yang berbeda sesuai dengan kriteria atau kategori lokasi tersebut.

Setelah mengetahui kategori ikon dari marker, kita tinggal mengambil data gambar ikon yang sudah kita taruh yang memiliki nama yang sesuai dengan kategori tersebut.

Mudah kan ? Sekian dulu tutorial Google Maps dari saya tentang bagaimana cara menampilkan Multimarker di Google Maps.

Silahkan download full source-nya disini. Selamat mencoba dan semoga bermanfaat 😀

32 Comments

  1. ami ami Juli 19, 2014

    mas, bisa tolong dijelaskan tidak? maksudnya a dan b di syntax koneksi database di atas apa ya?

    yg ini lho mas :
    $query = mysql_query(“SELECT `a`.*,`b`.* FROM `lokasi` AS `a` LEFT JOIN `kategori` AS `b` ON `a`.`kategori` = `b`.`id`”);
    $i = 0;

    terimakasih

    • El Cicko El Cicko Post author | Juli 19, 2014

      oh itu….itu fungsi ALIAS dalam query SQL, biasanya ini dipake kalo lagi mau menggabungkan data dari dua table atau lebih…sebenernya `a` atau `b` bisa diganti..bebas aja…bisa `table_a` atau `table_b`.
      ini berfungsi untuk menghindari nama kolom yang sama di table yang berbeda…misalkan kolom id di table pertama dengan id di table ke dua…jadi ini perlu dipake supaya script SQLnya ga bingung..maka dipake lah kaya gini a.id dan b.id….

      sama seperti kasus diatas :
      SELECT `a`.*,`b`.* FROM `lokasi` AS `a` LEFT JOIN `kategori` AS `b` ON `a`.`kategori` = `b`.`id`

      table lokasi sebagai `a` dan table `kategori` sebagai `b`…

      mudah-mudahan bisa difahami 🙂

      • Dayat Bong Dayat Bong September 7, 2016

        mas saya kan coba ganti nama tabel dari database yang saya buat sendiri misalnya * FROM lokasi AS a saya ganti * FROM tempat AS a, dan pengaturan kolom tabelx sudah saya rubah sesuai tabel yg saya buat. tapi petax kenapa kok gak muncul ya mas ngeblank gtu, padahal itu kan fungsix hanya untuk munculkan marker saja.

  2. dedi dedi Agustus 8, 2014

    mas…kalo mau masukin link di info windowsnya bisa gak mas ? soalnya dah ane coba pake tag a href … malah mapnya gk mau nongol ?

    • El Cicko El Cicko Post author | Agustus 8, 2014

      apa penempatan single / double quote nya udah bener mas? biasanya sich disitu…kalau ga berhasil juga mungkin harus diconvert dulu ke html object, misalkan pake gini $(variable).html()

      • dedi dedi Agustus 10, 2014

        single double di struktur database mas ?
        maaf mas…saya agak kurang ngerti …. rencananya saya mau nyoba buat semacam pemetaan wisata jadi info windowsnya berisi info mengenai t4 wisata tp untuk lebih lengkapnya mau saya kasih link sehingga bisa buka halaman baru …. sampai saat ini saya coba masih error 😀
        makasih sebelumnya mas ^^

        • El Cicko El Cicko Post author | Agustus 11, 2014

          bukan mas..penggunaan quote di javascriptnya

  3. wibowo wibowo September 4, 2014

    Pagi mas mohon bantuannya… bagimana caranya membuat multi icon yang bisa di seleksi menggunakan GET pada keluarannya hanya satu icon tergantung kategori yang kita pilih fleksibel.. misalnya saya pilih kategori wisata maka icon wisata yang hanya tampil dan misalnya lagi saya pilih mesjid maka icon mesjid aja yang tampil. misalnya WHERE ikon=’$_GET[ikon]’

    • El Cicko El Cicko Post author | September 4, 2014

      halo mas wibowo, kalau untuk langsung di akses lewat $_GET kayaknya ga bisa karena Google Maps ini berjalan pake AJAX, btw untuk multi ikon yg dinamis itu ada diartikel sebelumnya. silahkan di explore ya mas 😀

  4. nippa nippa April 6, 2016

    terima kasih pak, artikel ini membantu saya…
    boleh saya tanya, jika dua kategori berbeda dengan satu titik yang sama untuk menampilkan ikon nya gimana ya pak?? saya sudah coba, tapi hasilnya cuma berbentuk cluster pak…
    ada solusi pak, biar muncul ikon yg berbeda tersebut??

    • El Cicko El Cicko Post author | April 6, 2016

      Sebelumnya terima kasih ya mas atas kunjungannya, semoga jadi manfaat 🙂
      sebenarnya itu adalah kekurangan dari Google Maps, sampai sekarang saya juga belum ada solusinya. Akhirnya mentok-mentok saya ganti engine map ke LeafletJS dengan API Maps menggunakan Open Street Map.

      • nippa nippa April 6, 2016

        ada tutorial pak map LeafletJS dengan API Maps menggunakan Open Street Map.?? yang sama dengan kasus diatas??
        kalo boleh send source code via email pak… makasih

  5. pulung pulung Mei 3, 2016

    kalau mau diberikan select deselect combo boc untuk menampilkan marker sesuai keinginan giman gan ?

  6. Mohammad Latif Mohammad Latif Mei 14, 2016

    Assalamualaikum mas
    terima kasih untuk tutorialnya mas sangat bermanfaat

    tapi boleh bertanya mas
    saya diaplikasi ini mencoba memasukkan data lebih dari 130 data di mysql tapi kok malah tidak keluar petanya ya mas, kalau 120 an masih bisa keluar saat saya tambah jadi sekitar 130 ke atas malah petanya tidak keluar

    apa ada batasan database lokasinya?

    apabila dibatasi apakah bisa di atur batasannya?
    dan bagaimana caranya?

    Mohon bantuannya mas,
    Terima Kasih

    • El Cicko El Cicko Post author | Mei 16, 2016

      hmmm…coba diubah mas timeout excecution script atau memory-nya juga. atau bisa jadi ada koordinat yang salah format (ada spasi atau salah koma atau titik)

  7. Novi Adi Novi Adi Mei 28, 2016

    MarkerClusterer images di markerclusterer_packed.js sudah not found mas, jd dulu yg misal daerah yg dekat” bisa muncul jumlah cluster dengan warna biru atau kuning skrg malah gk muncul mas, apa ada masukan mas??

  8. Sony Sugianto Sony Sugianto Juli 20, 2016

    Mas mau tanya ada gak tutorial buat pencarian data pada google map?. terima kasih

    • El Cicko El Cicko Post author | Juli 21, 2016

      sumber datanya dari database atau dari google maps mas?

  9. Thino Riwu Thino Riwu Juli 27, 2016

    Makasi untuk artikel nya mas..
    saya mau minta bantuannya mas, kalau mau tampilkan gambar dari database ke info windows bagaimana ya ? tolong di bantu. sebelumnya makasih.

  10. Dimas Demms Dimas Demms Juli 27, 2016

    Mas mau tanya, jika di coba keluar pesan ” Ups! Ada sesuatu yang salah.
    Laman ini tidak memuat Google Maps dengan benar. Lihat konsol JavaScript untuk mengetahui detail teknisnya. ”

    Yg harus diperbaiki bagian mananya mas? soalnya saya lsg download source nya, database sudah tersambung, cuman “maps/peta tidak muncul”.
    Trm kasih sblmnya ^^

    • Dimas Demms Dimas Demms Juli 27, 2016

      Edit : sudah bisa mas ternyata. Untuk di akses secara offline apakah bisa mas? soalnya tadi saya coba matikan koneksi internet, maps tidak mau muncul. Saya pake XAMPP untuk server lokalnya mas.

  11. mas Deo mas Deo Agustus 26, 2016

    bisa mas, tapi untuk memunculkan icon kenapa harus klik angka 4 yang ada di map ya?

  12. Diky Wahyu Diky Wahyu September 5, 2016

    ma mau tanya nih, ini kok waktu zoomnya di buat kurang dari 14 markernya gak keliatan ya 😀 baru belajar nih mohon bimbingan

    • El Cicko El Cicko Post author | November 17, 2016

      engga koq, coba di refresh ulang

  13. Dimas Demms Dimas Demms Februari 16, 2017

    Sudah coba pakai API Key mas? Kalau blm coba daftar > Request API Key Maps Google

  14. sigit sigit Februari 28, 2017

    kenapa ditempat saya setelah saya rubah untuk aplikasi lain dilocalhost saya munculnya ups ada yang salah

    • El Cicko El Cicko Post author | Maret 2, 2017

      Kemungkinan karena ga pakai Key API Google, coba mas cek referensinya disini

  15. erdian erdian Maret 3, 2017

    makasih bgt gan..makasih banget berkat koding ini tugas selsai..

  16. rubi rubi Maret 23, 2017

    min apakah bisa membuat icon marker sendidri untuk gis dg api dari google?

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *