Menampilkan infowindows bukan perkara yang sulit, namun menampilkan menampilkan isi infowindows dengan ajax itulah yang sulit. Sebelum membahas lebih jauh kita harus memahami dulu mengapa kita perlu menggunakan AjAX untuk menampilkan infowindow. Anggaplah anda mempunyai sistem informasi geografis lokasi wisata diseluruh indonesia. Saat pertama kali user membuka website, anda menampilkan semua marker dan data infowindowsnya dibelakang layar. Apa jadinya jika ada 100 lokasi yang masing masingny aberisi gambar, deskripsi dan informasi lainnya? Loading akan terasa sangat lama bahkan kemungkinan timeout karena anda berusaha mengambil semua info diawal. Selain pemborosan bandwidth, cara ini juga tidak efektif karena user paling hanya membuka beberapa infowindow.
Untuk mengatasi hal diatas, maka kita perlu membuat infowindows berbasis ajax. Konsepnya, semua marker ditampilkan. Data yang diambil hanya idlokasi, latitude dan longitude. Saat user mengklik marker, baru data yang berhubungan dengan marker tersebut diambil lalu ditampilkan di infowindows . Perhatikan contoh tampilannya dibawah ini.
Code yang saya tampilkan hanya potongannya saja mengingat tutorial ini merupakan kelanjutan dari tutorial Tutorial Google maps + PHP yang saya tulis sebelumnya .
struktur tabel lokasi
CREATE TABLE IF NOT EXISTS `lokasi` ( `idlokasi` int(11) NOT NULL AUTO_INCREMENT, `nama` varchar(100) DEFAULT NULL, `lat` double DEFAULT NULL, `lon` double DEFAULT NULL, `foto` varchar(30) NOT NULL, `deskripsi` text NOT NULL, PRIMARY KEY (`idlokasi`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;
Untuk mengambil data dengan teknik ajax, saya menggunakan jquery. Potongan kode di dalam event click markernya adalah sbb:
google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { var id= locations[i][0]; $.ajax({ url : "get_info.php", data : "id=" +id , success : function(data) { infowindow.setContent(data); infowindow.open(map, marker); } }); } })(marker, i));
sedangkan code get_info.php adalah sebagai berikut:
<?php //konfgurasi koneksi database mysql_connect('localhost','root',''); mysql_select_db('candralab-map'); $id=$_GET['id']; $sql_lokasi="select * from lokasi where idlokasi='$id' "; $result=mysql_query($sql_lokasi); while($data=mysql_fetch_object($result)){ $content="<div id=\"content\"> <div id=\"siteNotice\"> </div> <h3 id=\"firstHeading\" class=\"firstHeading\">$data->nama</h3> <div id=\"bodyContent\"> <p> <img src=\"foto/$data->foto\" style=\"float:left;margin:0 5px 0 0;\"> $data->deskripsi </p> </div></div>"; } echo $content; ?>
Download source code
Bagi yang ingin mencobanya sendiri, silahkan download sourcecode lengkapnya disini
Mas gimana caranya menampilkan gps dan rute pada web google maps ?
mas ini knapaya kok error?
Parse error: syntax error, unexpected end of file in C:xampphtdocscandralab-iw-ajaxlokasi.php on line 91 dan udah cari <? gak nemu mas ??
baca komentar lain… intinya jangan pake short_Open_tag
mas ini knapaya kok error?
Parse error: syntax error, unexpected end of file in C:xampphtdocscandralab-iw-ajaxlokasi.php on line 91
ganti semua <? dengan <?php
di lokasi.php baris 30 – 32 tidak jelas maksudnya:’
while($data=mysql_fetch_object($result)){
?>
[‘idlokasi;?>’, lat;?>, lon;?>],
mungkin salah tulis, mohon penjelasan
coba pakai script ini
while($data=mysql_fetch_object($result)){
?>
[‘idlokasi;?>’, lat;?>, lon;?>],
Mas Klu data2 yg ditampilkan dari 2 tabel databes gmn caranya ?
Mohon Bantuannya….
Terimakasih….
kamu bljr mysql lg yah..ga ada hub antara bnyk tbl dngn infowindows..itu cmn mslh di query..
Mas klu ukuran content nya bisa dikurangi
mas tolong buatin picker google map yg bisa nyimpen di database ,trimaksih ..
Mas saya mw nnya. Di tempat saya error pada bagian ini : $id=$_GET[‘id’]; dan echo $content;. Kira2 ap yang salah ya mas? Terima kasih sebelumnya.
Mas saya mw nnya, di tampilan saya error dibagian ini $id=$_GET[‘id’]; dan echo $content;. Kira2 apa yg salah?
mas ketika saya mengganti ukuran jenis lain tidak bisa tampil. apakah ada pengaturan di coding untuk ukuran yang berbeda.? mohon pencerahan mas. untuk skripsi saya.
Bang bagaimana caranya menampilkan data perdetail
yang di get kan, kalau hanya di file lokasi.php nya bagaimana mengakali file get_info.php
jadi query di bawah ini hanya pada lokasi.php
$id_detail=$_GET[‘id_detail’];
$sql_lokasi=”SELECT `id_detail`, `pemilik`, `pengguna`, `alamat`,
`tinggi`, `lat`, `lng` FROM `tmenaradetail` where id_detail=’$id_detail'”;
mohon di respon bang, thanks udah mau respon
mas, saya mw tanya.. bagaimana cara menampilkan sebuah data dari database berupa infowindow di tampilan marker di google maps? mohon bantuannya..
lah, tutorial yang kamu baca kan lagi membahas itu… kalau cuman satu ya tinggal di sqlnya diganti misal “select * from lokasi where idlokasi=’1′
short_open_tag udah on tapi kok masih
Parse error: syntax error, unexpected end of file in C:\xampp\htdocs\candra2\lokasi.php on line 90. Mohon pencerahannya mas..
biasanya ada kurung yang kurang…cek pake editor yang mendukung pengecekan kurung
untuk yang nanya driving direction dan insert googlemap, tunggu aja tutorial selanjutnya… ikuti terus web ini, cukup langganan lewat email… insyaallah awal maret tutorialnya akan saya tulis
tidak bisa di download source codex mas, mohon bantuan… thanks
Thanks sudah berbagi ilmunya mas,
btw kalau fitur drivingx sudah include ya mas..?
gimana caranya , untuk insert lokasi yang baru??
Terimakasih mas ilmunya, ijin diterapkan mas candra.
bang d web tampil Parse error: syntax error, unexpected $end in C:\xampp\htdocs\hendrik\lokasi.php on line 91 knp y bang
ada errorny om,,,
saya pake short_open_tag, pastikan di Xampp dan servermu seting php.ini short_open_tag di on kan…. kalau ga tau, setiap tag di ganti menjadi
gan pas sya run mlah muncul pesan server eror..
pastikan koneksi internetnya aktif…
kalau boleh tau cara menampilkan polyline dari data gps gimana ya mas?makasih sebelumnya,,
woh, GPS?saya tidak begitu tau, tapi kalau maksudnya anda emmbuat aplikasi dan ingin menampilkan data track ‘perjalanan’, pelajari aja google map api. sudah disediakan kok fiturnya
waaah mangstaaabs mas tutorialnya watur nuwun mas,,,semoga tetap semangat hehehe
Mas, caranya gimana nampilin infowindow serta marker dari hasil pencarian menggunakan combobox??