Apa itu Google Maps Kegiatan dan Bagaimana cara menggunakannya?

Google Maps API kuliah

Tutorial Google Maps Kegiatan Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari Klik peta penanda Zoom,contoh,ulang bendera,contoh,Ketika penanda diklik untuk membuka jendela info.,contoh,Mengatur label dan tag informasi untuk setiap jendela yang terbuka,contoh,Google Maps - Event manual,

Google Maps Kegiatan

Sebelumnya: Google Map Overlay

Berikutnya: Google Maps set kontrol

Klik penanda untuk tampilannya - mengikat google acara peta.

Klik peta penanda Zoom

Kami masih menggunakan peta kertas lagi menggunakan London.

pengguna titik untuk mencapai ketika penanda diklik fungsi zoom (zoom penanda peta diklik acara mengikat).

Kode adalah sebagai berikut:

contoh

// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});

Coba »

Gunakan addListener () event handler untuk mendaftar pendengar acara. Metode ini menggunakan sebuah objek, sebuah acara untuk mendengarkan, ketika peristiwa tertentu terjadi akan dipanggil.

ulang bendera

Kami menambahkan event handler untuk peta untuk mengubah 'pusat' properti, menggunakan kode berikut setelah 3 detik center_changed acara akan ditandai pusat pergeseran:

contoh

google.maps.event.addListener(map,'center_changed',function() {
window.setTimeout(function() {
map.panTo(marker.getPosition());
},3000);
});

Coba »

Ketika penanda diklik untuk membuka jendela info.

Klik penanda untuk menampilkan beberapa teks di jendela pesan:

contoh

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

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});

Coba »

Mengatur label dan tag informasi untuk setiap jendela yang terbuka

Pelaksanaan jendela ketika pengguna mengklik pada peta

Pengguna klik pada peta untuk posisi penanda letak () fungsi pada lokasi yang ditunjuk untuk menempatkan penanda, dan pop-up window pesan:

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);
}

Coba »