Menampilkan Google Map Dengan Geolocation (Google Map Api)
Geolocation (Google Map API) – Selamat pagi sahabat blogger semuanya, berjumpa lagi dengan saya guzko di tutorial blog yang sederhana ini. Semoga blog saya ini sanggup mengatakan sahabat blogger manfaat serta inspirasi.
Sesuai judul diatas, Geolocation (Google Map API), kali ini saya akan mengatakan tutorial yang singkat mengenai google map. Langsung saja saya jelaskan dibawah ini :
Buka Aplikasi PHP Editor
Silahkan buka aplikasi php editor kesukaan sahabat, jikalau saya disini menggunakan sublime text untuk mengetik arahan php dan arahan lainnya. Jika sudah, buat sebuah file php baru dan inputkan arahan 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 arahan 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 yakni untuk menentukan lokasi awal pada dikala map di-load di browser. Kaprikornus arahan Latitude dan Langitude diatas sanggup 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 yakni untuk menampilkan alamat atau map dikala user menginputkan nama tempat pada kolom dan klik button tampilkan. Contoh ibarat 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 yakni sanggup dibilang arahan utama, alasannya ialah arahan tersebut merupakan arahan API dari google agar sanggup menampilkan map.
Bagaimana sahabat ? cukup praktis kan bikinnya untuk menampilkan google map dengan php. Intinya arahan 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 sanggup mengatakan manfaat bagi sahabat. Kita berjumpa lagi di lain waktu dengan tutorial yang berbeda.
seee…uuuu
Sumber http://guz-kopyok.blogspot.com/
