Google Maps adalah peta online yang disediakan gratis oleh Google (walaupun ada versi berbayarnya juga). Seluruh source code-nya tersedia gratis di internet. Tinggal bagaimana kitanya aja bisa memanfaatkan atau tidak. Artikel sebelumnya sudah membahas tentang
Cara menampilkan Google Maps dengan Javascript
Cara menampilkan marker di Google Maps dengan Javascript
Berikut ini akan saya tulis sedikit tutorial tentang bagaimana cara Menampilkan Info Window di Google Maps dengan Javascript. Apa itu “Info Window”? Info Window kalau kita terjemahkan menjadi ‘Jendela informasi’. Info window/jendela informasi ini biasanya digunakan untuk menampilkan informasi detail yang berhubungan dengan marker. Kan tidak mungkin juga bukan, kita menuliskan informasi langsung ke petanya. Selain akan mengakibatkan peta menjadi ‘kumuh’, juga aplikasi web kita menjadi kurang interaktif. Lebih baik jika user ingin menampilkan informasi detail baru kita tampikan informasi tersebut melalui info window.
Cara Menampilkan Info Window di Google Maps
Untuk menampilkan info window di Google Maps caranya cukup mudah. Anda bisa langsung menampilkannya atau atau setelah marker diklik/ditekan. Untuk yang pertama (langsung menampikan info window), Anda dapat langsung memanggil script berikut ini
var infowindow = new google.maps.InfoWindow({
content:"Ini Info Window ku"
});
infowindow.open(map,marker);
Perhatikan bahwa untuk menampilkan info window, Anda harus menciptakan sebuah instance dari class google.maps.InfoWindow dengan parameter ‘content’ yang berisi informasi yang nantinya akan ditampilkan di kotak dialog di web. Dengan script sederhana di atas, hasilnya adalah sebagai berikut:
Sekarang kita akan coba meng-advanced tampilan web peta online kita. Kali ini kita akan menampilkan info window setelah marker di klik (jadi tidak langsung ditampikan ketika web di-reload). Untuk case seperti ini tentunya yang kita butuhkan adalah mendeteksi event onClick milik marker. Bagaimana caranya melakukannya menggunakan Javascript? Ternyata mudah sekali, cukup hanya menambahkan satu baris berikut, keinginan Anda sudah terwujud 🙂
google.maps.event.addListener(marker,'click',function() {
var infowindow = new google.maps.InfoWindow({
content:"Ini Info Window ku"
});
infowindow.open(map,marker);
});
Jadi untuk mendeteksi event onClick di Google Maps, cukup dengan mendeklarasikan function ‘google.maps.event.addistener(a,b,c)’ dengan parameter a=‘objek yang dideteksi’, b=‘event apa’, c=‘aksi yang dilakukan’ . Untuk case kita di atas, parameter ‘aksi yang dilakukan’ adaah menampilkan info window. Untuk hasilnya, tampilannya akan sama persis dengan gambar di atas, hanya saja info window baru muncul jika marker ditekan.
Berikut ini adalah source code lengkapnya
<!DOCTYPE html>
<html>
<head>
<title>Peta Gmaps Sederhana</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCnjlDXASsyIUKAd1QANakIHIM8jjWWyNU"
type="text/javascript"></script>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -6.917464, lng: 107.619123},
zoom: 8
});
marker = new google.maps.Marker({
position: {lat: -6.917464, lng: 107.619123},
map: map,
//animation:google.maps.Animation.BOUNCE,
//icon:'images/tower_on.png',
title:"Ini markerku",
});
google.maps.event.addListener(marker,'click',function() {
var infowindow = new google.maps.InfoWindow({
content:"Ini Info Window ku"
});
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Download source code di atas di sini
Simpan source code di atas dengan nama ‘infowindow.html’ dan letakkan di folder c:/xampp/htdocs/tutorial’. Untuk melihat hasilnya, buka web browser kesayangan Anda dan ketikkan localhost/tutorial/infowindow.html di address bar web browser Anda tersebut (silahkan lihat gambar di atas jika masih bingung).
Demikian sedikit tutorial tentang cara menampilkan Info Window di Google Maps dengan Javascript, semoga membantu Anda yang sedang mencari info tentangnya.
a Technopreneur – writer – Enthusiastic about learning AI, IoT, Robotics, Raspberry Pi, Arduino, ESP8266, Delphi, Python, Javascript, PHP, etc. Founder of startup Indomaker.com