Tutorial Google Maps V3: Kustomisasi Marker Icons pada Beberapa Lokasi

Tutorial Google Maps V3: Kustomisasi Marker Icons pada Beberapa Lokasi

Tutorial Information

ProgramGoogle Maps
VersionV3
DifficultyStandar
Estimated Time30 Menit

Di tutorial sebelumnya penulis telah memaparkan bagaimana cara Membuat Marking Google Maps untuk Beberapa Lokasi dengan Data XML. Peta yang dihasilkan menunjukkan marker yang…

Di tutorial sebelumnya penulis telah memaparkan bagaimana cara Membuat Marking Google Maps untuk Beberapa Lokasi dengan Data XML. Peta yang dihasilkan menunjukkan marker yang seragam (sejenis). Lalu bagaimana jika kita suatu saat ingin membedakan marker-marker tersebut berdasarkan kategori tertentu? Misalnya kita ingin memberikan icon khusus untuk bangunan stasiun dan stadion. Tutorial kali ini akan menjawab pertanyaan tersebut.

Langkah-langkah berikut kurang lebih sama seperti pada tutorial sebelumnya. Untuk memberikan pemahaman, database yang digunakan juga sama, hanya akan ada penambahan kolom ‘category’. Kolom ‘category’ ini merupakan atribut yang diberikan untuk suatu lokasi berdasarkan bentuk atau jenis lokasi. Misalnya monumen, stasiun, stadion, dan sebagainya.

1. Membuat tabel data lokasi di dalam database MySQL yang sudah Anda tentukan, misalnya dengan nama ‘markers3’.

CREATE TABLE IF NOT EXISTS `markers3` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(60) NOT NULL,
  `address` varchar(80) NOT NULL,
  `lat` float(10,6) NOT NULL,
  `lng` float(10,6) NOT NULL,
  `category` varchar(60) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=11 ;

2. Memasukkan beberapa contoh data ke dalam tabel tersebut, berupa id, nama lokasi, alamat, latitude, longitude, dan category.

INSERT INTO `markers3` (`id`, `name`, `address`, `lat`, `lng`, `category`) VALUES
(1, 'Tugu Jogja', 'Jalan Diponegoro No. 1', -7.782880, 110.367043, 'monumen'),
(2, 'Stasiun Tugu', 'Jalan Pasar Kembang 10', -7.789550, 110.364250, 'stasiun'),
(3, 'Stasiun Lempuyangan', 'Jalan Lempuyangan 20', -7.790170, 110.375832, 'stasiun'),
(4, 'Benteng Vredeburg', 'Jl. Malioboro 50', -7.800460, 110.365639, 'benteng'),
(5, 'Stadion Kridosono', 'Jl. Yos Sudarso 2', -7.787600, 110.374138, 'stadion'),
(6, 'Alun-Alun Utara', 'Jl. Alun-Alun Utara 1', -7.803840, 110.364372, 'alun');

3. Membuat script PHP untuk memparsing data dari MySQL di atas ke dalam bentuk XML. Misalnya script berikut disimpan dalam file dataLokasi.php. Jangan lupa untuk mengganti nilai variabel $username, $password, dan $database, sesuai dengan konfigurasi server Anda.

<?php

     // Parsing Karakter-Karakter Khusus
     function parseToXML($htmlStr)
     {
          $xmlStr=str_replace('<','<',$htmlStr);
          $xmlStr=str_replace('>','>',$xmlStr);
          $xmlStr=str_replace('"','"',$xmlStr);
          $xmlStr=str_replace("'",''',$xmlStr);
          $xmlStr=str_replace("&",'&',$xmlStr);
          return $xmlStr;
     }

     // Menghubungkan Koneksi dengan server MySQL
     $username="root";
     $password="passwordAnda";
     $database="databaseAnda";

     $connection=mysql_connect (localhost, $username, $password);
     if (!$connection) {
          die('Not connected : ' . mysql_error());
          }

     // Memilih database MySQL yang aktif
     $db_selected = mysql_select_db($database, $connection);
     if (!$db_selected) {
          die ('Can\'t use db : ' . mysql_error());
          }

     // Memilih semua baris pada tabel 'markers3'
     $query = "SELECT * FROM markers3 WHERE 1";
     $result = mysql_query($query);
     if (!$result) {
          die('Invalid query: ' . mysql_error());
          }

     // Header File XML
     header("Content-type: text/xml");

     // Parent node XML
     echo '<markers>';

     // Iterasi baris, masing-masing menghasilkan node-node XML
     while ($row = @mysql_fetch_assoc($result)){

          // Menambahkan ke node dokumen XML
          echo '<marker ';
          echo 'name="' . parseToXML($row['name']) . '" ';
          echo 'address="' . parseToXML($row['address']) . '" ';
          echo 'lat="' . $row['lat'] . '" ';
          echo 'lng="' . $row['lng'] . '" ';
          echo 'category="' . $row['category'] . '" ';
          echo '/>';
     }

     // Akhir File XML (tag penutup node)
     echo '</markers>';

?>

4. Membuat script index.php. Script ini merupakan script utama yang berfungsi untuk menampilkan peta berbasis Google Maps ke dalam browser Anda. Di dalam script ini terdapat kode HTML, CSS, dan JavaScript sekaligus.

<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Kustomisasi Marker Icons pada Beberapa Lokasi</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<style>
          html, body {
               font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
               font-size: medium;
               }
          #map {
               width: 500px;
               height: 400px;
               border: 1px solid black;
          }
</style>

<script type="text/javascript">

     //Mendefinisikan alamat icons yang akan digunakan
    var customIcons = {
      stasiun: {
        icon: 'icons/stasiun.png'
      },
      monumen: {
        icon: 'icons/monumen.png'
      },
       benteng: {
        icon: 'icons/benteng.png'
      },
      stadion: {
        icon: 'icons/stadion.png'
      },
       alun: {
        icon: 'icons/alun.png'
      }
    };

    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(-7.789550, 110.364250),
        zoom: 14,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;

      // Bagian ini digunakan untuk mendapatkan data format XML yang dibentuk dalam dataLokasi.php
      downloadUrl("dataLokasi.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("category");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b><br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon

          });
          bindInfoWindow(marker, map, infoWindow, html);
        }
      });
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}

</script>

</head>

<body onload="load()">

<center>

<h4>Kustomisasi Marker Icons pada Beberapa Lokasi</h4>
<div id="map"></div>

</center>
</body>

</html>

5. Bagian kode program index.php yang harus digaris bawahi yaitu sebagai berikut:

//Mendefinisikan alamat icons yang akan digunakan
    var customIcons = {
      stasiun: {
        icon: 'icons/stasiun.png'
      },
      monumen: {
        icon: 'icons/monumen.png'
      },
       benteng: {
        icon: 'icons/benteng.png'
      },
      stadion: {
        icon: 'icons/stadion.png'
      },
       alun: {
        icon: 'icons/alun.png'
      }
    };

Dari kode tersebut tampak bahwa kita harus mempunyai sebuah folder icons yang berisi icon-icon khusus yang akan kita tampilkan ke dalam aplikasi Google Maps.

icons

Ukuran maksimal icons biasanya adalah 32×32 px dan berformat .png. Kita bisa mendapatkan icons tersebut dengan membuat sendiri menggunakan aplikasi pengolah gambar atau mencari di internet. Selain itu, gambar-gambar icon tersebut juga tidak harus disimpan ke dalam folder webhosting kita. Akan tetapi, bisa saja kita mengambilnya dari alamat URL tertentu. Misalnya:

var customIcons = {
  restoran: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
  },
  kafe: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
  }
};

6. Memanggil file index.php melalui browser Anda. Hasilnya akan tampak seperti gambar di bawah ini. Dalam peta tampak beberapa markers yang memiliki icons berbeda-beda, sesuai dengan ‘category’ lokasi.

Icons Sesuai Kategori

Icons Sesuai Kategori

Jika Anda bisa mendesain sendiri, buatlah icon-icon khusus tersebut sesuai dengan keinginan dan kebutuhan Anda. Namun, bagi Anda yang tidak mau berlama-lama, Anda bisa mencoba mengunjungi alamat http://mapicons.nicolasmollet.com/.

 

webicon

mapicons 

Di dalam situs tersebut ada banyak jenis icon yang dikelompokkan ke dalam beberapa kategori icon, lengkap dengan style yang bisa dipilih on the spot. Misalnya style icons bergaya Classic, iOS, Light, Dark, Gradasi, White, atau Simple. Warna dasar icon-icon tersebut juga dapat ditentukan sesuai selera. Anda juga diperkenankan untuk mengunduh kumpulan icons tersebut secara legal dalam bentuk .zip.

Atau jika Anda mempunyai referensi lain mengenai situs penyedia icons untuk Google Maps, tidak ada salahnya untuk ikut berbagi memberikan review di BisaKomputer. Semoga bermanfaat.

Tag: , , , , , , ,

25 Comments

Leave Comment
  1. Nurjayantiani Basfain says:

    Postingannya sangat membantu,, mau nanya ,, klo listing menampilkan video dalam marker info google maps api v3 dalam php ada gak ??
    Mohon bantuannya

  2. Ardiansyah says:

    artikel nya sangat membantu mas
    mau tanya nih mas, kalo d buat event utk sebuah tombol menampilkan dan menyembunyikan marker yang ada di maps bisa g mas?

    mohon bantuannya mas :)

  3. Thomas says:

    Wow super sekali, aku coba berjalan dengan baik.
    kalo boleh tahu, gimana caranya buat multi tab di info window?
    mohon pencerahannya.

    terima kasih.

  4. Muhammad Rizky says:

    Makasih mas, pas bgt buat tugas akhir mata kuliah SIG saya hehe.
    Sekalian mau nanya mas, gimana caranya kalau kita mau membuat Search ya, jadi begitu nama diinput, dia akan mengarah ke marker tersebut?

  5. vin.ch says:

    Artikel nya sangat membantu
    thanks

  6. Bimandika says:

    Mas mau nanya kalo pake direction ato navigation dari tempat kita berada gimana ya ?

  7. jack says:

    Kok ane gak muncul yach Icon nya. padahal folder dan Iconnya sudah saya Create.

    Settingan database nya juga udah sama, tapi tetep gak bisa yach,

  8. Hamsir says:

    Gimana scriptx ya kalo dari posisi user ke lokasi tertentu yang ingin dituju dibuatkan mapx menggunakan google map, mirip dengan program google map yang ada pada mobil pribadi pada umumnya agar sopir tidak nyasar. Tolong pencerahannya gan

  9. kharisty says:

    makasi yaa… tutorialnya sangat membantu..

  10. kira-kira saya mw tanya kalau ambil mapnya daerah tertentu saja misalnya lokasi untuk DKI jakarta itu bagaimana? tidak se dunia :) bisa gak?

  11. kira-kira saya mw tanya kalau ambil mapnya daerah tertentu saja misalnya lokasi untuk DKI jakarta itu bagaimana? tidak se dunia :) bisa gak? kalau bisa di tambahkan dimana

  12. emil says:

    kok markernya malah gak muncul ya bang?

  13. romadhon says:

    markernya gak muncul mas, solusinya gimana ?

  14. Riska says:

    pak/mas, mau tanya, ada gak tutorial untuk menampilkan marker berdasarkan kategori menggunakan checkbox ? Trima Kasih

  15. awang says:

    gan, minta file komplitnya gan dalam bentuk.zip
    saya coba brkli2 marker gk pernah muncul. terima kasih gan.

  16. Fahd says:

    gan, ko icon nya g nampil y. Apa masalahnya?

  17. Rumah Murah says:

    wah terima kasih banyak, sangat bermanfaat ilmunya

  18. saya sudah coba di localhost :D, tapi untuk sekarang lg coba ngutek buat aplikasi serupa di android.. makasih info

  19. syamsir says:

    makasih toritorialnya bro…

  20. izzi chiko says:

    Bagi yang sudah nyoba tetapi icon-nya tidak muncul, perhatikan script aslinya yang ini:
    // Parsing Karakter-Karakter Khusus
    function parseToXML($htmlStr)
    {
    $xmlStr=str_replace(‘<','’,’>’,$xmlStr);
    $xmlStr=str_replace(‘”‘,'”‘,$xmlStr);
    $xmlStr=str_replace(“‘”,”’,$xmlStr);
    $xmlStr=str_replace(“&”,’&’,$xmlStr);
    return $xmlStr;
    }

    Diganti dengan yang ini:
    // Parsing Karakter-Karakter Khusus
    function parseToXML($htmlStr)
    {
    $xmlStr=str_replace(‘<','’,’>’,$xmlStr);
    $xmlStr=str_replace(‘”‘,'”‘,$xmlStr);
    $xmlStr=str_replace(‘”‘,'”‘,$xmlStr);
    $xmlStr=str_replace(“&”,’&’,$xmlStr);
    return $xmlStr;
    }

  21. Angki says:

    Bung kalo panggil file gambar di XML gimana?

Write Comment

Your email will not be published. The marked label is required.