Sunday, March 3, 2013

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


Tutorial Google Maps V3: Memberi Penanda Beberapa Titik Lokasi dengan XML
Penulis : Aditya Rizki
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′.
?
1
2
3
4
5
6
7
8
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.
?
1
2
3
4
5
6
7
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. Misalscript berikut disimpan dalam file dataLokasi.php. Jangan lupa untuk mengganti nilai variabel$username, $password, dan $database, sesuai dengan konfigurasi server Anda.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<?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.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!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 = {
    };
    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.
---
Artikel Terkait

1 comments:

fitria claudya monica lahinta said...

mas kok koding dalam dataLokasi.php ada yg error ?