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.

 

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

Tags: , ,

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

  1. Syaheriyani says:

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

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

    1. baca komentar lain… intinya jangan pake short_Open_tag

  3. Ario Bowo says:

    mas ini knapaya kok error?

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

    1. Candra Adi Putra says:

      ganti semua &lt? dengan &lt?php

  4. Triyono says:

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

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

    mungkin salah tulis, mohon penjelasan

    1. Oman Kopyor says:

      coba pakai script ini

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

  5. Fauzi Rahman says:

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

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

  6. Fauji Rahman says:

    Mas klu ukuran content nya bisa dikurangi

  7. reyandreaa says:

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

  8. Annisa Yunan says:

    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.

  9. Nisa says:

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

  10. rina says:

    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.

  11. freddysidauruk says:

    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

  12. pradana says:

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

    1. Candra Adi Putra says:

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

  13. Eyang Bubur says:

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

    1. Candra Adi Putra says:

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

  14. Candra Adi Putra says:

    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

  15. b45r1 says:

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

  16. b45r1 says:

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

  17. burga says:

    gimana caranya , untuk insert lokasi yang baru??

  18. bambang efendy says:

    Terimakasih mas ilmunya, ijin diterapkan mas candra.

  19. ti08043098 says:

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

  20. Anonymous says:

    ada errorny om,,,

    1. Candra Adi Putra says:

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

  21. Anonymous says:

    gan pas sya run mlah muncul pesan server eror..

    1. Candra Adi Putra says:

      pastikan koneksi internetnya aktif…

  22. Anonymous says:

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

    1. Candra Adi Putra says:

      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

  23. anto says:

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

    1. ru says:

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

Tinggalkan Komentar plz!