CandraLab

IT Pro & Developer Resource

Menu Close

Google map: Menampilkan Informasi detail tanpa InfoWindow

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.