Geolocation (Google Map API) - Selamat pagi sahabat blogger semuanya, berjumpa lagi dengan saya guzko di tutorial blog yang sederhana ini. Semoga blog saya ini bisa memberikan sahabat blogger manfaat serta inspirasi.
Sesuai judul diatas, Geolocation (Google Map API), kali ini saya akan memberikan tutorial yang singkat mengenai google map. Langsung saja saya jelaskan dibawah ini :
Buka Aplikasi PHP Editor
Silahkan buka aplikasi php editor kesukaan sahabat, kalau saya disini menggunakan sublime text untuk mengetik kode php dan kode lainnya. Jika sudah, buat sebuah file php baru dan inputkan kode dibawah ini :
<html>
<head>
<script type="text/javascript">
var map = null;
var geocoder = null;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(-25.274398,133.775136), 1);
map.setUIToDefault();
geocoder = new GClientGeocoder();
}
}
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 15);
var marker = new GMarker(point, {draggable: true});
map.addOverlay(marker);
GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
});
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
});
GEvent.trigger(marker, "click");
}
}
);
}
}
</script>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxSPW5CJgpdgO_s4yyMovOaVh_KvvhSfpvagV18eOyDWu7VytS6Bi1CWxw" type="text/javascript"></script>
<title></title>
</head>
<body onload="initialize()" onunload="GUnload()">
<form name="form1" action="#" onsubmit="showAddress(this.address.value); return false">
<input type="text" style="width:450px;" name="address" id="address" value="">
<input type="submit" value="Tampilkan" />
</form>
<div id="map_canvas" style="width: 780px; border:2px solid #999; height: 650px;"></div>
</body>
</html>
saya jelaskan sedikit tentang kode diatas.
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(-25.274398,133.775136), 1);
map.setUIToDefault();
geocoder = new GClientGeocoder();
}
}
fungsi initialize diatas adalah untuk menentukan lokasi awal pada saat map di-load di browser. Jadi kode Latitude dan Langitude diatas bisa sahabat blogger rubah sesuai keinginan.function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 15);
var marker = new GMarker(point, {draggable: true});
map.addOverlay(marker);
GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
});
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
});
GEvent.trigger(marker, "click");
}
}
);
}
}
fungsi showaddress diatas adalah untuk menampilkan alamat atau map ketika user menginputkan nama tempat pada kolom dan klik button tampilkan. Contoh seperti gambar dibawah ini :
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxSPW5CJgpdgO_s4yyMovOaVh_KvvhSfpvagV18eOyDWu7VytS6Bi1CWxw" type="text/javascript"></script>kode diatas adalah bisa dibilang kode utama, karena kode tersebut merupakan kode API dari google agar bisa menampilkan map.
Bagaimana sahabat ? cukup mudah kan bikinnya untuk menampilkan google map dengan php. Intinya kode API dari map googlenya saja sahabat. Semoga dengan melihat tutorial sederhana ini, sahabat mungkin akan menjadi terinspirasi unutk membuat fungsi-fungsi yang lebih canggih lagi, misal menghitung jarak tempuh dan waktu tempuh dari 2 latitude dan longitude.
Demikianlah sahabat blogger tutorial saya tentang Geolocation (Google Map API). Semoga bisa memberikan manfaat bagi sahabat. Kita berjumpa lagi di lain waktu dengan tutorial yang berbeda.
seee...uuuu