Google Maps - Acara
Program JavaScript Google Maps dapat merespon berbagai event yang dibuat oleh pengguna. Bab ini memberikan contoh yang mendemonstrasikan cara melakukan penanganan acara saat bekerja dengan Google Maps.
Menambahkan Pemroses Acara
Anda dapat menambahkan pendengar acara menggunakan metode ini addListener(). Ia menerima parameter seperti nama objek yang ingin kita tambahkan pendengar, nama peristiwa, dan peristiwa handler.
Contoh
Contoh berikut menunjukkan cara menambahkan event listener ke objek marker. Program ini menaikkan nilai zoom peta sebesar 5 setiap kali kita mengklik dua kali pada penanda.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center: myCenter,
zoom:5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position: myCenter,
title:'Click to zoom'
});
marker.setMap(map);
//Zoom to 7 when clicked on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>Ini menghasilkan keluaran berikut -
Membuka Jendela Info di Klik
Kode berikut membuka jendela info saat mengklik penanda -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center:myCenter,
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hi"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>Ini menghasilkan keluaran berikut -
Menghapus Pendengar
Anda dapat menghapus listener yang ada menggunakan metode ini removeListener(). Metode ini menerima objek pendengar, oleh karena itu kita harus menetapkan pendengar ke variabel dan meneruskannya ke metode ini.
Contoh
Kode berikut menunjukkan cara menghapus pendengar -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center:myCenter,
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hi"
});
var myListener = google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.removeListener(myListener);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>Ini menghasilkan keluaran berikut -