Klik penanda untuk tampilannya - melampirkan event ke Google maps.
Klik Marker The Zoom
Kami masih menggunakan peta dari halaman sebelumnya: peta berpusat pada London, Inggris.
Sekarang kita ingin tampilannya ketika pengguna mengklik penanda (Kami melampirkan sebuah event handler untuk penanda bahwa membesarkan peta saat diklik).
Berikut adalah kode menambahkan:
Contoh
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
}); Cobalah sendiri " Kami mendaftar untuk pemberitahuan acara menggunakan addListener() event handler. metode yang mengambil sebuah objek, sebuah acara untuk mendengarkan, dan fungsi untuk panggilan ketika peristiwa tertentu terjadi.
Pan Kembali ke Marker
Di sini, kita menambahkan event handler untuk peta perubahan pada properti 'pusat' dan menggeser peta kembali ke penanda setelah 3 detik pada acara center_changed:
Contoh
google.maps.event.addListener(map,'center_changed',function() {
window.setTimeout(function() {
map.panTo(marker.getPosition());
},3000);
}); Cobalah sendiri " Buka InfoWindow Ketika mengklik Marker The
Klik penanda untuk menunjukkan infowindow dengan beberapa teks:
Contoh
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
}); Cobalah sendiri " Mengatur Penanda dan Open InfoWindow untuk Setiap Marker
Menjalankan fungsi ketika pengguna mengklik pada peta.
The placeMarker() function menempatkan penanda dimana pengguna telah mengklik, dan menunjukkan infowindow dengan garis lintang dan bujur dari penanda:
Contoh
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(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);
} Cobalah sendiri "