P. 1
Meloading Google Maps Javascript API

Meloading Google Maps Javascript API

|Views: 109|Likes:
Published by Denandika Putri

More info:

Published by: Denandika Putri on Jun 13, 2012
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOCX, PDF, TXT or read online from Scribd
See more
See less

03/21/2013

pdf

text

original

Meloading Google Maps Javascript API

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

Menampilkan peta di halaman web
var 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 database Sekarang 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

var des = $("#deskripsi"). }).fadeOut().val().click(function(){ $("#jendelainfo"). var y2 = $("#y2"). $("#y1").val("").val(). $("#x2"). Berikut contoh kodenya : . cache: false. rectangle. $("#deskripsi"). $("#judul").setMap(null).google.addListener(peta.maps. data: "x1="+x1+"&y1="+y1+"&x2="+x2+"&y2="+y2+"&judul="+judul+"&des="+des+"&wrn="+wrna. } }). height:400px"></div> Map Options Ada beberapa option-option yang perlu di konfigurasi untuk menampilkan google map. contoh : <div id="petaku" style="width:600px.latLng). success: function(msg){ alert(msg). }). var x1 = $("#x1").val().com/apis/maps/documentation/javascript/examples/standard.com/maps/api/js?sensor=false"></script> Kode di atas akan mengambil file javascript google maps api dan file css untuk google maps.val("").val(). $("#loading").php".val("").css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://maps. $("#tutup"). $("#loading").event. var y1 = $("#y1"). $. yaitu <div>. $("#y2").show(). }).val().google. ambildatabase('akhir').click(function(){ var wrna = $("#warnaku").function(event){ kasihtanda(event.val("").ajax({ url: "simpanlokasi.val(""). Langsung aja kita lihat kode : <link href="http://code.ready(function(){ $("#tombol_simpan").val(). }).'click'.val(""). $("#x1"). Elemen DOM Peta Untuk nantinya menempatkan di mana kita letakkan google map diwebsite. var x2 = $("#x2"). Menyimpan ke database $(document).val(). Meloading Google Maps API Untuk menampilkan google map di website kita adalah dengan memanfaatkan javascript API google map. kita perlu membuat elemen DOM. var judul = $("#judul").Memberi event listener click pada google map google.hide().

maps. maka akan ada fungsi yang akan kita jalankan. semakin besar nilainya sebagai besar zoom petanya. berguna untuk menentukan lokasi mana yang menjadi titik tengah peta ketika ditampilkan mapTypeId. menentukan tipe peta yang akan ditampilkan di website kita.Map(document. } Kode di atas akan membuat objek Marker. peta = new google. Variabel belitung untuk menentukan titik awal lokasi mana yang ingin kita tampilkan pertama kali ketika menampilkan google map. map: peta }).addListener(peta. HYBRID.maps. zoom.TERRAIN }. dalam bentuk koordinat Latitudes dan Longitudes. dalam hal ini adalah objek peta yang telah kita buat sebelumnya .event. misalnya fungsi kasihtanda() google.maps.LatLng(-2. Membaca Event Click Setelah kita berhasil menampilkan google map di website.latLng. var petaoption = { zoom: 9.var belitung = new google.maps.latLng). menentukan posisinya di mana. center. center: belitung.Marker({ position: lokasi. mapTypeId: google.getElementById("petaku"). menempatkannya di elemen DOM yang mempunyai id "petaku" dan menggunakan petaoption yang telah kita tentukan sebelumnya. TERRAIN Membuat dan Menampilkan Objek Peta Setelah kita tentukan konfigurasi map yang akan kita tampilkan. kita ingin apabila peta diklik. SATELLITE. Memberi Tanda di Google Maps Pada kode membaca event click di atas kita menjalankan fungsi kasihtanda() untuk membuat tanda di google maps function kasihtanda(lokasi){ tanda = new google.801732. berguna untuk menentukan nilai zoom yang akan ditampilkan.MapTypeId.petaoption). Kode tersebut kita membuat objek google map.maps. maka kita buat objek map dan menampilkanya di elemen DOM yang telah kita buat sebelumnya. }). dan ditaruh di map yang mana.6699666). lokasi berupa koordinat Latitudes dan Longitudes yang di dapat ketika map di klik yaitu event.function(event){ kasihtanda(event. 107. pilihan tipenya adalah : ROADMAP.'click'.

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->