Membuat Google Map API : Menggunakan PHP/MySQL dengan Google Maps

Kali ini saya tuliskan sedikit bagamana membuat peta google yang terkoneksi dengan database.  Tutorial ini saya tulis untuk kamu yang sudah familiar dengan bahasa pemprograman PHP/My SQL , dan khususnya yang mamiliki keinginan untuk belajar bagaimana menggunakan Google Maps dengan sebuah database MySQL. Setelah menyelesaikan tutorial ini, kamu akan mempunyai sebuah Google Map yang berbasiskan database dari lokasi-lokasi markernya dan tentunya dapat kamu kembangkan lebih jauh lagi seperti menambahkan halaman user atau admin melengkapi dengan username dan password membuat sebuah situs komunitas sederhana yang dapat menampilkan dimana saja rumah setiap user/penggunanya (yang ditampilkan dalam bentuk peta) itu semua bukan hal yang sulit tentunya, yang penting logika dan ide kalian :D , tapi dalam tutorial ini saya akan membuat yang paling dasar dulu. Peta yang akan saya buat berikut adalah peta kota Yogyakarta dan akan saya bedakan dalam dua tipe marker yakni marker untuk lokasi wisata dan museum. setiap tipe marker akan saya bedakan iconnya. Dalam Peta Sebuah jendela info dengan nama dan alamat dari lokasi akan ditampilkan diatas marker ketika marker tsb di klik. Dan nanti hasilnya akan seperti gambar berikut..

Berikut adalah 4 tahap dalam tutorial ini :

1. Membuat table database

2. Mengisi data/record ke dalam database

3. Menmpilkan data XML dengan PHP

4. Membuat Peta

1. Membuat sebuah table database

Database, sudah tahukan apa itu database, database berisi data/record dari suatu web, semua web dinamis pasti memilki database, facebook, yahoo, twitter, dll mempunyai database, bisa kamu bayangkan facebook memiliki database yang berisi jutaan bahkan milyaran data dari setiap penggunanya dari seluruh dunia bgitu juga dengan twitter google+ dll. Saya anggap disini kamu sudah mengerti (tentunya) bagaimana cara membuat sebuah database. Oke buat database dengan nama maps, kemudian buat tabel dengan nama marker buat 6 buah field dalam tabel tersebut yang terdiri dari id, nama, alamat, lat, lng, tipe , script SQL nya seperti berikut (tinggal kopas aja script berikut tabel langsung jadi)..

CREATE TABLE `markers` (
  `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
  `nama` VARCHAR( 60 ) NOT NULL ,
  `alamat` VARCHAR( 80 ) NOT NULL ,
  `lat` FLOAT( 10, 6 ) NOT NULL ,
  `lng` FLOAT( 10, 6 ) NOT NULL ,
  `tipe` VARCHAR( 30 ) NOT NULL
) ENGINE = MYISAM ;

Struktur databasenya akan nampak seperti gambar berikut...

Saya jelaskan fiel-field diatas :

Id        >>  berisi numeric untuk identitas unik dari setiap lokasi

Alamat >> berisi alamat lokasi

Lat       >> latitude lokasi

Lng      >> longitude lokasi

Tipe     >> tipe lokasi (wisata / museum)

2. Mengisi data/record ke dalam database 

Kemudia isi table marker dengan data (scriptnya)  seperti berikut  :

INSERT INTO `markers` (`id`, `nama`, `alamat`, `lat`, `lng`, `tipe`) VALUES
(1, 'Museum Benteng Vredeburg', 'Jl. Jend. A. Yani No.6 , Yogyakarta', -7.800330, 110.365967, 'museum'),
(2, 'Museum Biologi UGM', 'Jl. Sultan Agung No. 22, Yogyakarta.', -7.801969, 110.374374, 'museum'),
(3, 'Museum Affandi', 'Jl. Laksda Adisutjipto 167 Yogyakarta', -7.783037, 110.396164, 'museum'),
(4, 'Museum Wayang Kekayon', 'Jl. Raya Yogya-Wonosari Km. 7, Kec. Banguntapan, Bantul', -7.814852, 110.413033, 'museum'),
(5, 'Gembira Loka', 'Jl. Kebun Raya no. 2 Yogyakarta.', -7.803342, -110.397629, 'wisata'),
(6, 'Tugu Yogyakarta', 'Perempatan Jl. Pangeran Mangkubumi', -7.782958, 110.367043, 'wisata'),
(7, 'Monumen Jogja Kembali', 'Jl. Lingkar Utara, Jongkang, Sariharjo, Ngaglik, Sleman, YK', -7.749448, 110.369568, 'wisata'),
(8, 'Kraton Yogyakarta', 'Alun-alun utara, yogyakarta', -7.805708, 110.364113, 'wisata'),
(9, 'Malioboro', 'Jl. Malioboro, Yogyakarta', -7.793238, 110.365723, 'wisata');

Database beserta table dan data-datanya telah dibuat :D ..

3. Membuat berkas XML dengan PHP 

Pertama kita buat dahulu file php agar web kita nanti dapat terhubung dengan database. Script phpnya seperti berikut :

$server = "localhost";

$username = "root";

$password = "";

$database = "maps";

// Koneksi dan memilih database di server

mysql_connect($server,$username,$password) or die("Koneksi gagal");

mysql_select_db($database) or die("Database tidak bisa dibuka");?>

simpan script diatas dengan nama koneksi.php

Menggunakan Echo PHP untuk output XML

Dan berikut adalah script untuk menampilkan berkas xml dengan echo php :

<?php
require("koneksi.php");
function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','&lt;',$htmlStr);
$xmlStr=str_replace('>','&gt;',$xmlStr);
$xmlStr=str_replace('"','&quot;',$xmlStr);
$xmlStr=str_replace("'",'&#39;',$xmlStr);
$xmlStr=str_replace("&",'&amp;',$xmlStr);
return $xmlStr;
}

// Opens a connection to a MySQL server
$connection=mysql_connect (localhost, $username, $password);
if (!$connection) {
  die('Not connected : ' . mysql_error());
}
// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}
// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");
// Start XML file, echo parent node
echo '<markers>';
// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // ADD TO XML DOCUMENT NODE
  echo '<marker ';
  echo 'nama="' . parseToXML($row['nama']) . '" ';
  echo 'alamat="' . parseToXML($row['alamat']) . '" ';
  echo 'lat="' . $row['lat'] . '" ';
  echo 'lng="' . $row['lng'] . '" ';
  echo 'tipe="' . $row['tipe'] . '" ';
  echo '/>';
}
// End XML file
echo '</markers>';
?>

Simpan script diatas dalam bentuk file php dengan nama phpsqlajax_genxml.php

OK sekarang kita cek apakah berkas diatas sudah berjalan semestinya tanpa ada error sedikitpun.. langsung aja buka file phpsqlajax_genxml.php dengan browsermu (localhost jangan lupa).

Kalo di browser muncul data-datanya seperti gambar berikut berarti data dalam bentuk XML sukses dibuat..

Gambarnya sbb :

4. Membuat Peta

Ini adalah tahap terakhir setelah tahap-tahap sebelumnya semua sukses dijalankan. Langsung saja.. simak baik-baik, pelajari dan prakteka :p ..

Untuk membuat petanya Script lengkapnya seperti berikut :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Blognetizen : Google Maps PHP/MySQL Tutorial </title>

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAA8G9ZUehlmgHFYSk0eHkvMxSMGSzrQzuxP9i0yI8OwKXwu_vyNhQuc40vTW0co5ModYSrK6lCkwof0Q" type="text/javascript"></script>



    <script type="text/javascript">
    //<![CDATA[

    var iconBlue = new GIcon();
    iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
    iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconBlue.iconSize = new GSize(12, 20);
    iconBlue.shadowSize = new GSize(22, 20);
    iconBlue.iconAnchor = new GPoint(6, 20);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);

    var iconRed = new GIcon();
    iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
    iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconRed.iconSize = new GSize(12, 20);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(5, 1);

    var customIcons = [];
    customIcons["wisata"] = iconBlue;
    customIcons["museum"] = iconRed;

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(-7.805708, 110.364113), 13);

        GDownloadUrl("phpsqlajax_genxml.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var nama = markers[i].getAttribute("nama");
            var alamat = markers[i].getAttribute("alamat");
            var tipe = markers[i].getAttribute("tipe");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, nama, alamat, tipe);
            map.addOverlay(marker);
          }
        });
      }
    }

    function createMarker(point, nama, alamat, tipe) {
      var marker = new GMarker(point, customIcons[tipe]);
      var html = "<b>" + nama + "</b> <br/>" + alamat;
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
    //]]>
  </script>

  </head>

  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 500px"></div>
  </body>
</html>

Simpan script diatas dengan nama index.php

Sekarang jalan index.php dilocalhost.