Google maps InfoWindow berbasis Ajax +PHP

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

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

Author: Candra Adi Putra

Candra Adi Putra adalah Alumni STMIK AKAKOM Yogyakarta. Like Candralab Studio Di Facebook.

33 thoughts on “Google maps InfoWindow berbasis Ajax +PHP”

  1. mas ini knapaya kok error?

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

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

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

    mungkin salah tulis, mohon penjelasan

    1. coba pakai script ini

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

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

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

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

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

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

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

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

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

Tinggalin komentar dong!