Tutorial Google Maps V3: Memberi Penanda Beberapa Titik Lokasi dengan XML

Tutorial Google Maps V3: Memberi Penanda Beberapa Titik Lokasi dengan XML

Tutorial Information

ProgramGoogle Maps
Versionv3
DifficultyStandar
Estimated Time30 Menit

Pada tutorial sebelumnya penulis telah memaparkan bagaimana Cara Membuat Marking untuk Satu Lokasi dengan Google Maps. Hasil eksplorasi dari ide awal tersebut mungkin akan memunculkan…

Pada tutorial sebelumnya penulis telah memaparkan bagaimana Cara Membuat Marking untuk Satu Lokasi dengan Google Maps. Hasil eksplorasi dari ide awal tersebut mungkin akan memunculkan pertanyaan baru yaitu bagaimana seandainya penanda lokasi yang ingin ditampilkan lebih dari satu? Tutorial berikut ini akan menjawab pertanyaan tersebut.

Apabila pada tutorial sebelumnya, data-data lokasi diperoleh tanpa menggunakan database, maka pada tutorial kali ini penulis akan mencoba memanfaatkan database untuk menyimpan data-data lokasi tersebut. Untuk itu, diperlukan sebuah script PHP tambahan yang berfungsi untuk memparsing (menerjemahkan) data dari MySQL menjadi data XML.

1. Membuat tabel lokasi dalam database MySQL, misalnya dengan nama ‘markers2’.

CREATE TABLE IF NOT EXISTS `markers2` (
  `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,
  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, dan longitude.

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

3. Membuat script PHP untuk memparsing data dari MySQL di atas ke dalam bentuk XML. Misal 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, ganti bagian $username, $password, dan $database.
     $username="root";
     $password="passwordAnda";
     $database="example";

     $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 'markers2'
     $query = "SELECT * FROM markers2 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 '/>';
     }

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

?>

4. Langkah selanjutnya yaitu memanggil file dataLokasi.php di atas pada browser kesayangan Anda. Jika berhasil, maka browser Anda akan menampilkan data XML seperti pada gambar berikut. Isi dari data XML tersebut tidak lain adalah sesuai dengan isi database MySQL yang kita buat pada langkah sebelumnya.

Maps XML

5. 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>Marking Beberapa Lokasi dengan XML</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">

    var customIcons = {

        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.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 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;
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.customIcons,
            shadow: icon.shadow
          });
          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>Marking Beberapa Lokasi dengan XML</h4>
<div id="map"></div>

</center>
</body>

</html>

6. Memanggil file index.php melalui browser Anda. Hasil akhir dari tutorial ini akan tampak seperti gambar di bawah ini.

Maps

Dalam peta di atas tampak beberapa penanda yang isinya sesuai dengan data XML yang dibuat pada langkah sebelumnya.

Penutup

Banyak aplikasi web yang membutuhkan pemetaan terhadap beberapa titik lokasi tertentu, misalnya untuk kebutuhan peta lokasi wisata dan kuliner. Apakah markers yang digunakan untuk menandai suatu lokasi dapat dibedakan antara satu tempat dengan tempat yang lainnya? Apakah kita bisa mengganti bentuk markers tersebut sesuai dengan keinginan kita agar lebih menarik? Pertanyaan-pertanyaan ini akan dijawab pada tutorial selanjutnya. Nantikan terus tulisan-tulisan keren seputar pemrograman Google Maps di BisaKomputer.

Tag: , , , , , , ,

16 Comments

Leave Comment
  1. Mustofa says:

    mantap tutorialnya mas. lanjutannya dari tulisan yang kemaren yah, tapi memakai file xml untuk markernya :D

  2. myusro says:

    Great Tutorial, Terima Kasih
    Sangat bermanfaat Mas Aditya,
    Izin share di blog saya

  3. Andre says:

    mas tempat saya kok error ya..muncul pesan :

    Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in C:\xampp\htdocs\maps\dataLokasi.php on line 10

  4. Sakalvin says:

    Masih bingung nih. klo di kombinasikan titik2nya dengan pembatas(polygon) + marker + infowindow gimana ya ?

    sejauh ini, cuma berhasil nampilin marker + polygonnya doang
    info window nya gak bisa. Ada solusi ?

  5. Dayat says:

    Saya ko malah ga bisa tampil ya peta dan markernya???
    mohon bantuannya mas

  6. ndoz says:

    tutorial yg sangat bermanfaat..
    terima kasih udah berbagi

  7. makasih tutorialnya.
    mantap banget.

  8. joko says:

    insert gambar ke dalam info windows gmn ya gan ?

  9. sulis says:

    mau tanya mas klau dataLokasi.php nya hanya muncul 1 saja gmn mas ,format url: “dataLokasi.php?id=2” hanya muncul stasiun tugu…. saja, sorce code nya gmn mas?

  10. Uloh says:

    Mas. Saya mengikuti cara koneksi koordinat menggunakan php+javascript.. untuk yang lokalhost itu sudah tampil (sukses), kemudian saya onlinekan hanya muncul petanya saja, koordinatnya tidak tampil padahal db sudah disesuaikan. mhn bantuannya, makasih..

    08562344535

  11. fajar putra says:

    mas saya coba parsing data xml sama dengan yagn diatas, tapi ko hasilnya yang muncul tidak seperti yang di gambar diatas tapi kayak gini
    “This page contains the following errors:
    error on line 2 at column 1: Extra content at the end of the document
    Below is a rendering of the page up to the first error.”
    gimana itu mas?

  12. Adhiyat M Latif says:

    Mohon informasi, kalau mengolah data GPS melalui Device GPS nya, dan mau diolah langsung datanya ke dreamweaver…kira2 bgmna solusinya. Trimakasih

  13. Hegar Amposa says:

    Mantap gan,,sangat berguna sekali,,semoga ilmu nya menjadi barokah,,izin share gan

Write Comment

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