Multi Icon

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 pemikiran pada “Tutorial Google Maps – Menampilkan Multimarker di Google Maps”

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

    Balas
    • 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 🙂

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

        Balas
    • 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()

      Balas
      • 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 ^^

        Balas
  2. 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]’

    Balas
    • 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 😀

      Balas
  3. 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??

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

      Balas
      • 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

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

    Balas
  5. 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??

    Balas
  6. 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 ^^

    Balas

Tinggalkan Balasan ke Thino Riwu Batalkan balasan