Acara Google Maps
Klik Penanda untuk Zoom
Kami masih menggunakan peta dari halaman sebelumnya: peta yang berpusat di London, Inggris.
Sekarang kami ingin memperbesar ketika pengguna mengklik penanda (Kami melampirkan pengendali acara ke penanda yang memperbesar peta saat diklik).
Berikut adalah kode yang ditambahkan:
Contoh
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
Kami mendaftar untuk pemberitahuan acara menggunakan pengendali acara addListener(). Metode itu mengambil objek, peristiwa untuk didengarkan, dan fungsi untuk dipanggil ketika peristiwa yang ditentukan terjadi.
Geser Kembali ke Penanda
Di sini, kami menyimpan perubahan zoom dan menggeser peta kembali setelah 3 detik:
Contoh
google.maps.event.addListener(marker,'click',function() {
var pos = map.getZoom();
map.setZoom(9);
map.setCenter(marker.getPosition());
window.setTimeout(function() {map.setZoom(pos);},3000);
});
Buka InfoWindow Saat Mengklik Penanda
Klik pada penanda untuk menampilkan jendela info dengan beberapa teks:
Contoh
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
Setel Penanda dan Buka InfoWindow untuk Setiap Penanda
Jalankan fungsi saat pengguna mengklik peta.
Fungsi placeMarker() menempatkan penanda di mana pengguna telah mengklik, dan menampilkan jendela info dengan garis lintang dan garis bujur penanda:
Contoh
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(map, event.latLng);
});
function placeMarker(map, location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() +
'<br>Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}