API Google Map V3: comment ajouter des données personnalisées aux marqueurs


117

Existe-t-il un moyen d'ajouter des informations personnalisées à mes marqueurs pour une utilisation ultérieure? Il y a des moyens d'avoir une fenêtre d'information et un titre, mais que faire si je veux associer le marqueur à d'autres informations.

J'ai d'autres éléments affichés sur la page qui dépendent des marqueurs, donc quand un marqueur est cliqué, le contenu de la page doit changer en fonction du marqueur sur lequel on a cliqué.Je voudrais stocker et récupérer les données personnalisées une fois qu'un marqueur est, disons cliqué etc.

Merci

Réponses:


214

Comme un marqueur Google est un objet JavaScript, vous pouvez ajouter des informations personnalisées dans le formulaire key: value, où key est une chaîne valide. Ils sont appelés propriétés d'objet et peuvent être abordés de différentes manières. La valeur peut être tout ce qui est légal, aussi simple que des nombres ou des chaînes, ainsi que des fonctions, ou même d'autres objets. Trois moyens simples: dans la déclaration, la notation par points et les crochets

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";

Ensuite, pour le récupérer de la même manière:

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

3
Il n'y a rien dans la documentation officialisant ce modèle. En espérant qu'ils le feront plutôt que de le casser dans une version ultérieure.
Adam

1
La propriété 'customInfo' n'existe pas sur le type 'Marker'.
alehn96

1
Si vous utilisez dactylographié, vous voudrez peut-être utiliser les crochets plutôt que le point pour attribuer de telles propriétés
Cocoduf

14

Vous pouvez ajouter vos propres propriétés personnalisées aux marqueurs (veillez simplement à ne pas entrer en conflit avec les propriétés de l'API).

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.