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.

 

Tampilan infowindows yang kaya, terdiri dari judul, gambar dan paragraf. Anda juga bisa menambahkan form , link dan info lainnya disini

 

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

Categories: Google Maps

Candra Adi Putra

Candra Adi Putra S.Kom adalah Alumni STMIK AKAKOM Yogyakarta. Ingin Kerjasama, Pasang Iklan, Membuat aplikasi Android atau Web? hubungi saya di candraadiputra (at) gmail (dot) com atau WA ke 081328533115

33 Comments

Syaheriyani · 30 April , 2016 at 1:33 pm

Mas gimana caranya menampilkan gps dan rute pada web google maps ?

kaswar wijaya eka putra · 3 January , 2016 at 5:32 pm

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 &lt? gak nemu mas ??

    Candra Adi Putra · 3 January , 2016 at 5:33 pm

    baca komentar lain… intinya jangan pake short_Open_tag

Ario Bowo · 11 September , 2015 at 8:39 pm

mas ini knapaya kok error?

Parse error: syntax error, unexpected end of file in C:xampphtdocscandralab-iw-ajaxlokasi.php on line 91

    Candra Adi Putra · 14 September , 2015 at 5:16 pm

    ganti semua &lt? dengan &lt?php

Triyono · 1 December , 2014 at 7:20 pm

di lokasi.php baris 30 – 32 tidak jelas maksudnya:’

while($data=mysql_fetch_object($result)){
?>
[‘idlokasi;?>’, lat;?>, lon;?>],

mungkin salah tulis, mohon penjelasan

    Oman Kopyor · 15 August , 2015 at 9:11 pm

    coba pakai script ini

    while($data=mysql_fetch_object($result)){
    ?>
    [‘idlokasi;?>’, lat;?>, lon;?>],

Fauzi Rahman · 10 September , 2014 at 5:31 pm

Mas Klu data2 yg ditampilkan dari 2 tabel databes gmn caranya ?
Mohon Bantuannya….
Terimakasih….

    Candra Adi Putra · 11 September , 2014 at 10:07 am

    kamu bljr mysql lg yah..ga ada hub antara bnyk tbl dngn infowindows..itu cmn mslh di query..

Fauji Rahman · 7 August , 2014 at 7:24 pm

Mas klu ukuran content nya bisa dikurangi

reyandreaa · 2 August , 2014 at 6:08 pm

mas tolong buatin picker google map yg bisa nyimpen di database ,trimaksih ..

Annisa Yunan · 23 July , 2014 at 3:11 am

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.

Nisa · 23 July , 2014 at 2:21 am

Mas saya mw nnya, di tampilan saya error dibagian ini $id=$_GET[‘id’]; dan echo $content;. Kira2 apa yg salah?

rina · 16 July , 2014 at 3:08 pm

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.

freddysidauruk · 3 April , 2014 at 4:30 pm

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

pradana · 9 June , 2013 at 3:13 pm

mas, saya mw tanya.. bagaimana cara menampilkan sebuah data dari database berupa infowindow di tampilan marker di google maps? mohon bantuannya..

    Candra Adi Putra · 11 June , 2013 at 1:48 pm

    lah, tutorial yang kamu baca kan lagi membahas itu… kalau cuman satu ya tinggal di sqlnya diganti misal “select * from lokasi where idlokasi=’1′

Eyang Bubur · 5 June , 2013 at 8:47 pm

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

    Candra Adi Putra · 11 June , 2013 at 1:46 pm

    biasanya ada kurung yang kurang…cek pake editor yang mendukung pengecekan kurung

Candra Adi Putra · 27 February , 2013 at 6:32 pm

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

b45r1 · 26 February , 2013 at 7:59 pm

tidak bisa di download source codex mas, mohon bantuan… thanks

b45r1 · 26 February , 2013 at 7:26 pm

Thanks sudah berbagi ilmunya mas,
btw kalau fitur drivingx sudah include ya mas..?

burga · 21 February , 2013 at 10:42 am

gimana caranya , untuk insert lokasi yang baru??

bambang efendy · 15 February , 2013 at 3:51 pm

Terimakasih mas ilmunya, ijin diterapkan mas candra.

ti08043098 · 9 February , 2013 at 12:29 pm

bang d web tampil Parse error: syntax error, unexpected $end in C:\xampp\htdocs\hendrik\lokasi.php on line 91 knp y bang

Anonymous · 5 February , 2013 at 10:01 pm

ada errorny om,,,

    Candra Adi Putra · 5 February , 2013 at 10:54 pm

    saya pake short_open_tag, pastikan di Xampp dan servermu seting php.ini short_open_tag di on kan…. kalau ga tau, setiap tag

Anonymous · 22 January , 2013 at 8:52 pm

gan pas sya run mlah muncul pesan server eror..

    Candra Adi Putra · 31 January , 2013 at 1:15 am

    pastikan koneksi internetnya aktif…

Anonymous · 9 January , 2013 at 1:35 am

kalau boleh tau cara menampilkan polyline dari data gps gimana ya mas?makasih sebelumnya,,

    Candra Adi Putra · 31 January , 2013 at 1:23 am

    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

anto · 9 January , 2013 at 1:20 am

waaah mangstaaabs mas tutorialnya watur nuwun mas,,,semoga tetap semangat hehehe

    ru · 10 July , 2014 at 4:01 am

    Mas, caranya gimana nampilin infowindow serta marker dari hasil pencarian menggunakan combobox??

Tinggalkan Komentar plz!

This site uses Akismet to reduce spam. Learn how your comment data is processed.