Tutorial 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


Selesai.. sekarang upload ketiga file diatas yang terdiri dari index.php , koneksi.php , dan phpsqlajax_genxml.php ke webhostingmu dan juga database seperti yang telah dibuat diatas.. Hasilnya akan nampak seperti pada link berikut >> http://fbox.freetzi.com/blogmap.php ..(hdra)






Share this

Related Posts

Previous
Next Post »

36 comments

comments
September 10, 2013 at 1:28 AM delete

kenapa muncul :
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.

. markernya ga muncul

Reply
avatar
February 18, 2014 at 11:33 AM delete

Mantep artikelnya kang : http://www.tutorhack.com

Reply
avatar
April 30, 2014 at 6:26 PM delete

kenapa gini ya?

This page contains the following errors:

error on line 1 at column 1: Document is empty
Below is a rendering of the page up to the first error.

Reply
avatar
CS
May 2, 2014 at 8:40 PM delete

ga jelas gan.. emang isinya line 1 at column 1 apaan?

Reply
avatar
Anonymous
September 28, 2014 at 4:39 AM delete

mas ko ga bisa keluar markernya ya?

Reply
avatar
December 23, 2014 at 11:42 PM delete

bang aku coba persis kaya abang,tp panahnya kok gak keluar?

Reply
avatar
December 25, 2014 at 1:01 AM delete

mungkin url gambarnya salah?

Reply
avatar
January 26, 2015 at 7:21 PM delete

kalo localhost gak keluar, tapi kalo uda diupload baru bisa

Reply
avatar
March 5, 2015 at 7:35 AM delete

kenapa muncul :
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.

Reply
avatar
March 31, 2015 at 8:03 PM delete This comment has been removed by the author.
avatar
March 31, 2015 at 8:13 PM delete This comment has been removed by the author.
avatar
March 31, 2015 at 8:14 PM delete This comment has been removed by the author.
avatar
March 31, 2015 at 8:15 PM delete This comment has been removed by the author.
avatar
March 31, 2015 at 8:16 PM delete This comment has been removed by the author.
avatar
March 31, 2015 at 8:17 PM delete This comment has been removed by the author.
avatar
March 31, 2015 at 8:18 PM delete This comment has been removed by the author.
avatar
March 31, 2015 at 8:18 PM delete This comment has been removed by the author.
avatar
March 31, 2015 at 8:19 PM delete This comment has been removed by the author.
avatar
April 6, 2015 at 9:32 PM delete

terima kasih sudah mau berbagi gan.
kunjungi balik ya gan.
http://takengonscript.blogspot.com

Reply
avatar
July 28, 2015 at 10:09 PM delete

ko punya saya gak muncul ya mapnya? udah ikutin cara2nya juga.. mohon bantuannya ya mas :(

Reply
avatar
August 18, 2015 at 9:48 PM delete

trma kasih tutor nya gan, bermanfaat !!

Reply
avatar
December 21, 2015 at 11:45 AM delete

kebetulan banget nih saya lagi ada project buat website seperti zomato / path. saya mau tanya ini bisa di aplikasikan untuk mobile apps juga? terimakasih sebelumnya.

Reply
avatar
December 23, 2015 at 3:24 AM delete

Error-nya sama, admin tolong pencerahannya.

Reply
avatar
March 16, 2016 at 4:10 PM delete

Terimakasih banyak ya infonya, ini sangat membantu

Reply
avatar
March 22, 2016 at 6:59 PM delete

markernya ngga keluar, padahal ane udah ganti url?
kalo diterapin ke android bisa ngga?

Reply
avatar
August 4, 2016 at 7:12 PM delete This comment has been removed by the author.
avatar
August 4, 2016 at 7:15 PM delete This comment has been removed by the author.
avatar
August 4, 2016 at 7:33 PM delete

terima kasih bang atas postingannya yang sangat bermanfaat.
ane udah ikutin tutorial semuanya, tapi pas index.php ny di run di browser ko markers ny gk nampil ya???
mohon bantuannya,terima kasih
email saya : zulhamdie@gmail.com

Reply
avatar
August 17, 2016 at 7:26 PM delete

Sama juga errornya bisa pnecerahannya lagi....
makasih..

Reply
avatar
November 16, 2016 at 5:44 PM delete

Jika ditemukan Error (marker tidak muncul), coba koreksi koding pada file phpsqlajax_genxml.php berikut :
// Opens a connection to a MySQL server
$connection=mysql_connect (localhost, $username, $password);
menjadi :
// Opens a connection to a MySQL server
$connection=mysql_connect ($server, $username, $password);
Semoga berhasil.

Reply
avatar
May 12, 2017 at 8:35 AM delete

terimakasih kang, sangat bermanfaat ^_^

Reply
avatar
November 5, 2017 at 3:51 AM delete

malam min markers ga muncul ni

Reply
avatar

Komentar disini ..