Meloading Google Maps Javascript API<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Menampilkan peta di halaman webvar jakarta = new google.maps.LatLng(-6.237281, 106.332724);var petaoption = { zoom: 14, center: jakarta, mapTypeId: google.maps.MapTypeId.SATELLITE};peta = new google.maps.Map(document.getElementById("petaku"),petaoption);Sebelumnya kita harus membuat objek <div id="petaku"></div> di web kita, yang berfungsi sebagi tempat google map diletakkan.

Menampilkan di google map data daerah yang diambil dari databaseSekarang setelah kita mendapatkan data dengan format JSON, kita lihat bagaimana mengakses data JSON dan menampilkannya.function ambildatabase(akhir){ if(akhir=="akhir"){ //url untuk mengambil data paling akhir //dieksekusi jika barusan menyimpan data url = "ambildata.php?akhir=1"; }else{ //url untuk mengambil data semuanya url = "ambildata.php?akhir=0"; } $.ajax({ url: url, dataType: 'json', cache: false, success: function(msg){ for(i=0;i<msg.wilayah.petak.length;i++){ judulx[i] = msg.wilayah.petak[i].judul; desx[i] = msg.wilayah.petak[i].deskripsi; petak = new google.maps.Rectangle({ map: peta, fillColor: msg.wilayah.petak[i].warna, fillOpacity: 0.3, strokeColor: msg.wilayah.petak[i].warna, strokeWeight: 1 }); var bingkai = new google.maps.LatLngBounds( new google.maps.LatLng(msg.wilayah.petak[i].x1, msg.wilayah.petak[i].y1), new google.maps.LatLng(msg.wilayah.petak[i].x2, msg.wilayah.petak[i].y2) ); petak.setBounds(bingkai); setinfo(petak,i); } } });}

Dari contoh di atas, untuk mengakses judul dari data JSON yang telah kita buat sebelumnya adalah msg.wilayah.petak[i].judul, untuk mengakses deskripsi adalah msg.wilayah.petak[i].deskripsi

Memberi event listener click pada google mapgoogle.maps.event.addListener(peta,'click',function(event){ kasihtanda(event.latLng);});

Menyimpan ke database$(document).ready(function(){ $("#tombol_simpan").click(function(){ var wrna = $("#warnaku").val(); var x1 = $("#x1").val(); var y1 = $("#y1").val(); var x2 = $("#x2").val(); var y2 = $("#y2").val(); var judul = $("#judul").val(); var des = $("#deskripsi").val(); $("#loading").show(); $.ajax({ url: "simpanlokasi.php", data: "x1="+x1+"&y1="+y1+"&x2="+x2+"&y2="+y2+"&judul="+judul+"&des="+des+"&wrn="+wrna, cache: false, success: function(msg){ alert(msg); $("#loading").hide(); $("#x1").val(""); $("#y1").val(""); $("#x2").val(""); $("#y2").val(""); $("#judul").val(""); $("#deskripsi").val(""); ambildatabase('akhir'); rectangle.setMap(null); } }); }); $("#tutup").click(function(){ $("#jendelainfo").fadeOut(); });});

Meloading Google Maps APIUntuk menampilkan google map di website kita adalah dengan memanfaatkan javascript API google map. Langsung aja kita lihat kode :<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Kode di atas akan mengambil file javascript google maps api dan file css untuk google maps.

Elemen DOM PetaUntuk nantinya menempatkan di mana kita letakkan google map diwebsite, kita perlu membuat elemen DOM, yaitu <div>, contoh :<div id="petaku" style="width:600px; height:400px"></div>

Map OptionsAda beberapa option-option yang perlu di konfigurasi untuk menampilkan google map. Berikut contoh kodenya :

var belitung = new google.maps.LatLng(-2.801732, 107.6699666);var petaoption = {zoom: 9,center: belitung,mapTypeId: google.maps.MapTypeId.TERRAIN};

Variabel belitung untuk menentukan titik awal lokasi mana yang ingin kita tampilkan pertama kali ketika menampilkan google map, dalam bentuk koordinat Latitudes dan Longitudes.zoom, berguna untuk menentukan nilai zoom yang akan ditampilkan, semakin besar nilainya sebagai besar zoom petanya.center, berguna untuk menentukan lokasi mana yang menjadi titik tengah peta ketika ditampilkanmapTypeId, menentukan tipe peta yang akan ditampilkan di website kita, pilihan tipenya adalah : ROADMAP, SATELLITE, HYBRID, TERRAIN

Membuat dan Menampilkan Objek PetaSetelah kita tentukan konfigurasi map yang akan kita tampilkan, maka kita buat objek map dan menampilkanya di elemen DOM yang telah kita buat sebelumnya.peta = new google.maps.Map(document.getElementById("petaku"),petaoption);

Kode tersebut kita membuat objek google map, menempatkannya di elemen DOM yang mempunyai id "petaku" dan menggunakan petaoption yang telah kita tentukan sebelumnya.

Membaca Event ClickSetelah kita berhasil menampilkan google map di website, kita ingin apabila peta diklik, maka akan ada fungsi yang akan kita jalankan, misalnya fungsi kasihtanda()google.maps.event.addListener(peta,'click',function(event){kasihtanda(event.latLng);});

Memberi Tanda di Google MapsPada kode membaca event click di atas kita menjalankan fungsi kasihtanda() untuk membuat tanda di google mapsfunction kasihtanda(lokasi){tanda = new google.maps.Marker({position: lokasi,map: peta});}

Kode di atas akan membuat objek Marker, menentukan posisinya di mana, lokasi berupa koordinat Latitudes dan Longitudes yang di dapat ketika map di klik yaitu event.latLng, dan ditaruh di map yang mana, dalam hal ini adalah objek peta yang telah kita buat sebelumnya