Ajout d'identifiants aux marqueurs de carte Google

Question

J'ai un script qui boucle et ajoute progressivement des marqueurs.

J'essaie de faire en sorte que le marqueur actuel ait une fenêtre d'information et qu'il n'y ait que 5 marqueurs sur une carte à la fois (4 sans fenêtre d'information et 1 avec).

Comment puis-je ajouter un identifiant à chaque marqueur pour pouvoir supprimer et fermer les fenêtres d'information au besoin.

Voici la fonction que j'utilise pour définir le marqueur :

function codeAddress(address, contentString) {

var infowindow = new google.maps.InfoWindow({
  content: contentString
});

if (geocoder) {

  geocoder.geocode( { 'address': address}, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK) {

        map.setCenter(results[0].geometry.location);

       var marker = new google.maps.Marker({
          map: map, 
          position: results[0].geometry.location
       });

       infowindow.open(map,marker);

      } else {
       alert("La géocodage n'a pas été réussi pour la raison suivante : " + status);
      }
    });
  }

}

Answer 1

JavaScript est un langage dynamique. Vous pourriez simplement l'ajouter à l'objet lui-même.

var marker = new google.maps.Marker(markerOptions);
marker.metadata = {type: "point", id: 1};

Aussi, parce que tous les objets v3 étendent MVCObject(). Vous pouvez utiliser :

marker.setValues({type: "point", id: 1});
// ou
marker.set("type", "point");
marker.set("id", 1);
var val = marker.get("id");

Answer 2

Ajouter simplement une autre solution qui fonctionne pour moi .. Vous pouvez simplement l'ajouter dans les options de marqueur:

var marker = new google.maps.Marker({
    map: map, 
    position: position,

    // Attributs personnalisés / données / paires clé-valeurs
    store_id: id,
    store_address: address,
    store_type: type
});

Et ensuite les récupérer avec:

marker.get('store_id');
marker.get('store_address');
marker.get('store_type');

Answer 3

J'ai une simple classe Location que j'utilise pour gérer toutes mes choses liées aux marqueurs. Je vais coller mon code ci-dessous pour que vous puissiez jeter un coup d'œil.

La dernière ligne(s) est ce qui crée réellement les objets marqueurs. Cela parcourt un JSON de mes emplacements, qui ressemble à quelque chose comme ceci :

{"locationID":"98","name":"Bergqvist Järn","note":null,"type":"retail","address":"Smidesvägen 3","zipcode":"69633","city":"Askersund","country":"Sverige","phone":"0583-120 35","fax":null,"email":null,"url":"www.bergqvist-jb.com","lat":"58.891079","lng":"14.917371","contact":null,"rating":"0","distance":"45.666885421019"}

Voici le code :

Si vous regardez la méthode target() dans ma classe Location, vous verrez que je garde des références aux infowindow et je peux simplement les open() et close() à cause d'une référence.

Voir une démo en direct : http://ww1.arbesko.com/en/locator/ (tapez une ville suédoise, comme Stockholm, et appuyez sur Entrée)

var Location = function() {
    var self = this,
        args = arguments;

    self.init.apply(self, args);
};

Location.prototype = {
    init: function(location, map) {
        var self = this;

        for (f in location) { self[f] = location[f]; }

        self.map = map;
        self.id = self.locationID;

        var ratings = ['bronze', 'silver', 'gold'],
            random = Math.floor(3*Math.random());

        self.rating_class = 'blue';

        // c'est le point de marqueur
        self.point = new google.maps.LatLng(parseFloat(self.lat), parseFloat(self.lng));
        locator.bounds.extend(self.point);

        // Créer le marqueur pour le placer sur la carte
        self.marker = new google.maps.Marker({
            position: self.point,
            title: self.name,
            icon: new google.maps.MarkerImage('/wp-content/themes/arbesko/img/locator/'+self.rating_class+'SmallMarker.png'),
            shadow: new google.maps.MarkerImage(
                                        '/wp-content/themes/arbesko/img/locator/smallMarkerShadow.png',
                                        new google.maps.Size(52, 18),
                                        new google.maps.Point(0, 0),
                                        new google.maps.Point(19, 14)
                                    )
        });

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

        google.maps.event.addListener(self.marker, 'mouseover', function() {
            self.sidebarItem().mouseover();
        });

        google.maps.event.addListener(self.marker, 'mouseout', function() {
            self.sidebarItem().mouseout();
        });

        var infocontent = Array(
            '

Answer 4

Pourquoi ne pas utiliser un cache qui stocke chaque objet marqueur et référence un ID?

var markerCache= {};
var idGen= 0;

function codeAddress(addr, contentStr){
    // créer un marqueur
    // stocker
    markerCache[idGen++]= marker;
}

Éditer: bien sûr, cela repose sur un système d'index numérique qui n'offre pas de propriété de longueur comme un tableau. Vous pourriez bien sûr prototyper l'objet Object et créer une longueur, etc. pour ce genre de chose. D'un autre côté, générer une valeur ID unique (MD5, etc.) de chaque adresse pourrait être la solution.

Answer 5

Le marqueur a déjà un identifiant unique

marker.__gm_id