Menambahkan Marker Info Window Pada Google Map

AUTHOR
Info window merupakan popup yang muncul ketika sebuah marker diklik. Dalam info window dapat diisikan informasi-informasi yang relevan dengan marker. Contohnya marker yang menandakan lokasi restoran, ketika diklik maka akan muncul info window yang berisi alamat restoran beserta nomor teleponnya. Tentunya ini akan memberikan informasi lebih yang dibutuhkan oleh pengguna, daripada sekedar lokasi di atas peta.

Struktur kode untuk menambahkan info window adalah sebagai berikut

infowindow = new google.maps.InfoWindow({content:"Hello!"});


Berikut adalah contoh kode lengkap sebuah marker dengan info window. Hasil running kode ini dapat dilihat pada gambar 1.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>
<script type="text/javascript">
   function initialize() {
   var mapOptions = {
   center: new google.maps.LatLng(4.027433,97.267278),
   zoom: 8
   };
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var lokasi=new google.maps.LatLng(4.027433,97.267278);
var marker=new google.maps.Marker({
position:lokasi
  });
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Isi Info Window"
  });
google.maps.event.addListener(marker,'click',function(){
infowindow.open(map,marker);
});
  }
google.maps.event.addDomListener(window,'load',initialize);
    </script>
  </head>
  <body>
<div id="map-canvas" style="width:700px;height:500px" />
  </body>
</html>

Gambar 1. Marker dengan info window
Penjelasan Kode
Pada bagian ini yang menjadi fokus adalah kode yang di bold, yaitu:

 var infowindow = new google.maps.InfoWindow({
content:"Isi Info Window"
  });
google.maps.event.addListener(marker,'click',function(){
infowindow.open(map,marker);
});

1. Pertama kali dibuat variabel untuk info window, dalam hal ini dinamai infowindow. Dilanjutkan dengan inisiasi info window baru dengan syntax new.google.maps.InfoWindow().
2. Pada bagian opsi content disikan informasi yang akan ditambahkan dalam info window. Isi harus diapit dengan tanda koma pembuka dan penutup "isi". Karena isi tersebut harus berformat text(string).
3. Agar google maps mengenal event click pada marker yang dibuat, ditambahkan event listener dengan syntax google.maps.event.addListener(). Dalam event ini ditambahkan sebuah fungsi yang akan membuka info window ketika marker diklik. Info window dibuka dengan perintah infowindow.open(map,marker). Dimana map adalah nama peta google yang telah diinisiasi sebelumnya dan marker merupakan nama marker.

Related Posts

Disqus Comments