Sebenarnya utnuk memasang (meng embbed) Google Maps pada sebuah web cukup mudah,tentunya server atau komputer lokal yang digunakan untuk develop harus memiliki koneksi internet tentunya. Berikut ini adalah langkah-langkah untuk memasang GoogleMaps : 1. Yang pertama kita harus memasang Script untuk mengakses Google Maps API, Script nya adalah seperti berikut ini:
< script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg" type="text/javascript"> < / script >
2.yang berikutnya, membuat code javascript untuk menampilkan peta dengan menggunakan fungsi "load". yang dimaksud disini adalah peta akan muncul pada saat halaman web tersebut di buka.
< script type="text/javascript">
function load(Lat,Lng) {
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(Lat,Lng),1);
var point = new GPoint(Lat, Lng);
var marker = new GMarker(point);
map.addOverlay(marker);
}
< / script >
Copy paste code pada langkah nomor 1 dan 2 di atas sebelum tag < / head > tapi sebenarnya bisa di letakkan di manapun, ini biar rapi.
3. Sekarang untuk memanggil fungsi dari JavaScript tersebut, Agar supaya maps muncul pada saat halaman web dibuka letakkan pada tag body dengan event onload :
< ? PHP
$Lat = 110.379011 ;
$Lng= -7.764137;
? >
< body onload="load( < ? echo $Lat; ? >,< ? echo $Lng; ? >)" onunload="GUnload()" >
< div id="map" style="width: 500px; height: 300px" >< / div >
Berikut ini penjelasan mengenai code diatas :
1. terdapat variable PHP ( $Lat dan $Lng ), itu untuk mendefinisikan Latitude dan Longitude yaitu posisi Maps yang akan muncul nanti, variabel itu nantinya bisa dimodifikasi jika menggunakan data dari hasil query Mysql
2. pada tag < Body > kita menggunakan event onload=load() --> ini merupakan even pada tag body yang akan dijalankan pada saat web di buka.
3. div "map", pad div inilah nanti peta akan ditampilkan kita bisa mengatur lebar dan tinggi frame untuk petanya.
dari hasil code diatas hasil peta yang akan muncul :
itu tadi langkah-langkah sederhana untuk memasang Google maps pada halaman Web, untuk memperoleh ilmu yang lebih banyak silahkan mengunjungi Halaman Dokumentasi dari Google Maps API.
Terima kasih untuk tutorial dan penjelasannya, sangat bermanfaat dan mudah dipahami. Saya jadi lebih tahu bagaimana memasang Google Map API pada Web. Dan ini juga berhubungan dengan tugas kuliah web gis saya.
ReplyDeleteSilahkan mengunjungi website saya di: https://leor.mahasiswa.atmaluhur.ac.id/
dan website kampus saya di: http://www.atmaluhur.ac.id/