Artikel ini merupakan kelanjutan dari artikel dengan judul Google maps InfoWindow berbasis Ajax +PHP yang saya tulis sebelumnya. Jika dalam tutorial tersebut, informasi detail muncul di InfoWindows, dalam tutorial ini, kita akan belajar menampilkan informasi detail di halaman website. Cara kerjanya, user menklik sebuah marker (icon) di peta dan iformasi peta tersebut akan muncul di samping peta.

user mengklik icon marker disebelah kiri, maka informasi lokasi akan muncul disamping peta.

user mengklik icon marker disebelah kiri, maka informasi lokasi akan muncul disamping peta.

Karena artikel ini merupakan kelanjutan dari artikel sebelumnya, ada baiknya anda membaca artikel diatas terlebih dahulu. Dalam pembahasan ini, hal yang paling penting ada di bagian Script Google map untuk mengambil data dan CSS untuk menampilkan informasi dari database.

1. Siapkan div layout halaman

  <div id="main">
  <div id="peta"></div>
  <div id="info"></div>
</div>

2. Buat CSS untuk melayout halaman.

  body{
   background-color:#ffd76c;
  }
#main { 
	
    width: 800px;
    margin: 0 auto;
}
#peta   {
    width: 400px;
    height: 400px;
    background: red;
    float: left;
}

#info  {
    width: 400px;
  background-color:#fff;

    height: 400px;
    margin-left: 400px;
	padding-left:20px;
	
}
#info p{
padding:10px;
 text-align:justify;
 font-family:arial;
 font-size:0.8em;
}

3. Pada script Google map, ganti kode ajax untuk mengambil data dari server dan letakan informasi yang didapat ke div info.

 for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
		 icon: 'icon.png'
      });
     /* menambahkan event clik untuk menampikan
     	 infowindows dengan isi sesuai denga
	    marker yang di klik */
		
    		google.maps.event.addListener(marker, 'click', (function(marker, i) {
			return function() { 
				var id= locations[i][0];
	        /* ambil info dari server dan tampilkan ke dalam div info*/
				$.ajax({
					url : "get_info.php",
					data : "id=" +id ,
					success : function(data) {
							
							$("#info").html(data);
					}
				});		
			}
		})(marker, i));
    }

Download source code

Silahkan download source code lengkap termasuk databasenya disni.

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

9 Comments

Akbar · 15 November , 2016 at 11:54 am

Kang, sdh sy coba scriptnya termasuk tanda php nya sdh sy berikan mengikuti versi php yang sekrg, tapi mapsnya tidak muncul, kira2 penyebabnya apa ya, sdh sy berikan jg api keynya kang

    Akbar · 15 November , 2016 at 12:02 pm

    O iya pastinya ada internetnya kang :)

febby · 17 November , 2015 at 12:21 pm

ka aku uda coba buat script seperti diatas tp icon tidak muncul, bisanya default marker lalu ketika di klik info ga muncul apa karena bentrok jquerynya y ka? web yg aku bikin pakai jquery 1.4 dan 1.9 ka tolong bantuanya ka makasih

syawqi · 29 September , 2014 at 10:46 am

mas kalo mau menampilkan icon yang berbeda, gmn caranya?
terima kasih sukses selalu

Anonymous · 23 January , 2014 at 2:16 pm

bagaimana menambahkan lingkaran atau menambahkan polygon kedalam aplikasi ini?????????

Anonymous · 21 January , 2014 at 3:11 pm

bagaimana menambahkan lingkaran atau menambahkan polygon kedalam source code ini?????
mohon bimbingannya

Anonymous · 20 January , 2014 at 5:25 pm

Parse error: syntax error, unexpected $end in C:\xampp\htdocs\peta\candralab-div-ajax\lokasi.php on line 119
kenapa ya

    Candra Adi Putra · 20 January , 2014 at 7:22 pm

    short_open_tag=on di php.ini

    atau ganti

gunkz125 · 4 April , 2013 at 11:16 am

selamat siang kak.
saya mw bertanya untuk mendapatkan jarak dari lokasi A ke lokasi B dengan google maps bagaimana ya kak?
agar data jarak dalam satuan meter tersebut dapat disimpan ke dalam data base dan lokasi awal dan akhir bisa diset dari data base.

terimakasih kak
mohon bantuannya untuk tugas kampus saya.

Tinggalkan Komentar plz!