Google maps InfoWindow berbasis Ajax +PHP

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