Menggunakan SQL di Google Maps Javascript
2:47 AMIntegrasi SQL dengan Google Maps
Kali ini akan ditunjukkan cara untuk menampilkan marker menggunakan database dari MySQL. Langkah langkah dibawah ini hanyalah tutorial singkat yang saya ambil dan modifikasi dari developers.google.comuntuk menampilkan marker yang berasal dari SQL, tentu saja pertama kita harus membuat koneksi ke SQL kita menggunakan bahasa php yang ada. Untuk mengkoneksikan kita buat file php dengan isi sebagai berikut dan simpan dengan nama phpsqlajax_dbinfo.php
<?php
$username="username anda";
$password="password anda";
$database="nama database yang ingin anda pakai";
?>
setelah itu kita buat file php untuk mengubah database sql kita menjadi bentuk XML yang dapat dimengerti oleh google map javascript v3 API, sebenarnya ada 3 cara untuk mengubah sql menjadi bentuk xml tetapi kali ini yang akan saya jelaskan adalah cara yang bisa dilakukan jika kita menggunakan PHP 5. Buat dan simpan file berikut dengan nama phpsqlajax_genxml.php
<?php require("phpsqlajax_dbinfo.php"); // Start XML file, create parent node $dom = new DOMDocument("1.0"); $node = $dom->createElement("markers"); $parnode = $dom->appendChild($node); // 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"); // Iterate through the rows, adding XML nodes for each while ($row = @mysql_fetch_assoc($result)){ // ADD TO XML DOCUMENT NODE $node = $dom->createElement("marker"); $newnode = $parnode->appendChild($node); $newnode->setAttribute("name",$row['name']); $newnode->setAttribute("address", $row['address']); $newnode->setAttribute("lat", $row['lat']); $newnode->setAttribute("lng", $row['lng']); $newnode->setAttribute("type", $row['type']); } echo $dom->saveXML(); ?>
dari script diatas diasumsikan bahwa anda telah membuat database sql dengan tabel marker dan kolom sebagai berikut: name, address, lat, lng, type. Perlu diperhatikan kolom lat dan lng adalah hal yang penting karena tanpa data lat, lng atau koordinat dari marker maka marker yang diinginkan tidak akan tampil di google maps.
Script diatas melakukan iterasi untuk melakukan pengubahan ke dalam bentuk XML. Untuk mengecek apakah file xml kita sukses dibuat dapat langsung dilihat melalui browser dari file phpsqlajax_genxml.php(dapat dilakukan dengan local webserver).
Untuk menampilkan data yang sudah dalam bentuk xml tadi bersamaan dengan google map sebenarnya caranya cukuplah sederhana. Untuk contoh dibawah hanyalah file javascript nya saja, jadi anda harus membuat sendiri file HTML yang menampilkan javascript dibawah ini, untuk tutorial menampilkannya dapat dilihat dalam http://sleepingtux.blogspot.com/2012/11/hello-world-google-map-api.html
Berikut javascript untuk menggabungkan map dan xml yang telah ada.
Script diatas melakukan iterasi untuk melakukan pengubahan ke dalam bentuk XML. Untuk mengecek apakah file xml kita sukses dibuat dapat langsung dilihat melalui browser dari file phpsqlajax_genxml.php(dapat dilakukan dengan local webserver).
Untuk menampilkan data yang sudah dalam bentuk xml tadi bersamaan dengan google map sebenarnya caranya cukuplah sederhana. Untuk contoh dibawah hanyalah file javascript nya saja, jadi anda harus membuat sendiri file HTML yang menampilkan javascript dibawah ini, untuk tutorial menampilkannya dapat dilihat dalam http://sleepingtux.blogspot.com/2012/11/hello-world-google-map-api.html
Berikut javascript untuk menggabungkan map dan xml yang telah ada.
function initialize() {
var myposition=new google.maps.LatLng(-6.231518,106.866674)
var mapOptions = {
center: myposition,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
downloadUrl("phpsqlajax_genxml.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 point=new google.maps.LatLng(markers[i].getAttribute("lat"),markers[i].getAttribute("lng"));
var marker = new google.maps.Marker({
map: map,
position: point,
title: name,
icon: 'link icon, bisa dihilangkan jika ingin default'
});
}
});
}
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() {}
Selamat mencoba ^_^v , GBU
3 comments
gan,
ReplyDeletemw nanya nih, saya mau gambar polyline di google maps lalu menyimpannya ke database kemudian menampilkan polyline tersebut kembali ke peta.
gmn yah gan caranya ?
kalau polyline saya belum pernah coba sih. .
Deletetapi mungkin step nya kayak gini
1. ambil koordinat polyline yang digambar
2. pake ajax get/post ke service PHP
3. Service PHP nya simpan ke database. .
gan mau nanya klu menampilkan marker terdekat dari pengguna berdasarkan jarak atau radius gmn ya gan?
ReplyDelete