Google Map API V3: Cara menambahkan data Kustom ke penanda


117

Adakah cara untuk menambahkan beberapa informasi khusus ke penanda saya untuk digunakan nanti. Ada cara untuk memiliki jendela info dan judul, tetapi bagaimana jika saya ingin mengaitkan penanda dengan informasi lain.

Saya memiliki hal-hal lain yang ditampilkan pada halaman yang bergantung pada penanda sehingga ketika penanda diklik, konten pada halaman harus berubah tergantung pada penanda mana yang diklik. Saya ingin menyimpan dan mengambil data khusus setelah penanda memungkinkan katakan diklik dll.

Terima kasih

Jawaban:


214

Karena Google Marker adalah objek JavaScript, Anda dapat menambahkan informasi khusus dalam bentuk key: value, di mana kuncinya adalah string yang valid. Mereka disebut properti objek dan dapat didekati dengan berbagai cara. Nilai dapat berupa apa saja yang legal, sesederhana angka atau string, dan juga fungsi, atau bahkan objek lainnya. Tiga cara sederhana: dalam deklarasi, notasi titik dan tanda kurung siku

var markerA = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(0, 0),
    customInfo: "Marker A"
});

var markerB = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(-10, 0)
});
markerB.customInfo = "Marker B";

var markerC = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(-20, 0)
});
markerC['customInfo'] = "Marker C";

Kemudian untuk mengambilnya dengan cara yang sama:

google.maps.event.addListener(markerA, 'click', function() {
    alert(this.customInfo);
});

3
Tidak ada dalam dokumentasi yang memformalkan pola ini. Ini berharap mereka melakukannya daripada merusaknya di versi yang lebih baru.
Adam

1
Properti 'customInfo' tidak ada pada jenis 'Marker'.
alehn96

1
Jika Anda menggunakan skrip ketikan, Anda mungkin ingin menggunakan tanda kurung daripada titik untuk menetapkan properti seperti itu
Cocoduf

14

Anda dapat menambahkan properti kustom Anda sendiri ke marker (berhati-hatilah agar tidak konflik dengan properti API).

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.