Tuesday, October 25, 2011

Cara memasang Peta Google (Google Maps API) pada web PHP

Kebetulan kemaren habis dapet proyek kecil kecilan mengenai web GIS, klient minta dibuatkan web yang ada peta nya, lalu proyek tersebut kita buat dengan memasang GoogleMaps. Cara ini dilakukan dengan cara memanfaatkan Google Maps API yang disediakan oleh google. Nah untuk tau lebih jauh mengenai Google Maps API bisa baca-baca di alamat Dokumentasi Google Maps berikut ini : Google API
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.

1 comment:

  1. 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.

    Silahkan mengunjungi website saya di: https://leor.mahasiswa.atmaluhur.ac.id/
    dan website kampus saya di: http://www.atmaluhur.ac.id/

    ReplyDelete