Agregar identificadores a los marcadores de mapas de google

Question

Tengo un script que realiza bucles y agrega marcadores de uno en uno.

estoy tratando de conseguir el marcador actual para tener una ventana de información y y sólo tienen 5 marcadores en el mapa a la vez (4 sin ventanas de información y 1 con)

¿Cómo puedo añadir un identificador a cada marcador para que pueda eliminar y cerrar ventanas de información según sea necesario.

Ésta es la función que estoy utilizando para definir el marcador:

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("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
    } 

}

Answer 1

JavaScript es un lenguaje dinámico. Podrías simplemente agregarlo al objeto mismo.

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

también, porque todos los objetos v3 se extienden MVCObject(). Se puede utilizar:

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

Answer 2

Por qué no utilizar una caché que almacena cada objeto marcador y referencias una identificación?

var markerCache= {}; 
var idGen= 0; 

function codeAddress(addr, contentStr){ 
    // create marker 
    // store 
    markerCache[idGen++]= marker; 
} 

Editar: por supuesto, esto se basa en un sistema de índice numérico que no ofrece una propiedad de longitud como una matriz. Por supuesto, podría prototipar el objeto Object y crear una longitud, etc. para tal cosa. OTOH, generando un valor de ID único (MD5, etc.) de cada dirección, podría ser el camino a seguir.

Answer 3

Tengo una clase simple Location que utilizo para manejar todas mis cosas relacionadas con los marcadores. Pegaré mi código a continuación para que lo eche un vistazo.

La (s) última (s) línea (s) es (son) las que realmente crean los objetos marcadores. Se realiza un bucle a través de algunos de mis lugares JSON, que se ven algo como esto:

{"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"} 

Aquí está el código:

Si nos fijamos en el método target() en mi clase de Ubicación, verá que guardo referencias a las ventanas de infowindow y pueden simplemente open() y close() debido a una referencia.

ver una demostración en vivo: http://ww1.arbesko.com/en/locator/ (tipo en una ciudad sueca, como Estocolmo, y pulsa enter)

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

     // this is the marker point 
     self.point = new google.maps.LatLng(parseFloat(self.lat), parseFloat(self.lng)); 
     locator.bounds.extend(self.point); 

     // Create the marker for placement on the map 
     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(
      '<div class="locationInfo">', 
       '<span class="locName br">'+self.name+'</span>', 
       '<span class="locAddress br">', 
        self.address+'<br/>'+self.zipcode+' '+self.city+' '+self.country, 
       '</span>', 
       '<span class="locContact br">' 
     ); 

     if (self.phone) { 
      infocontent.push('<span class="item br locPhone">'+self.phone+'</span>'); 
     } 

     if (self.url) { 
      infocontent.push('<span class="item br locURL"><a href="http://'+self.url+'">'+self.url+'</a></span>'); 
     } 

     if (self.email) { 
      infocontent.push('<span class="item br locEmail"><a href="mailto:'+self.email+'">Email</a></span>'); 
     } 

     // Add in the lat/long 
     infocontent.push('</span>'); 

     infocontent.push('<span class="item br locPosition"><strong>Lat:</strong> '+self.lat+'<br/><strong>Lng:</strong> '+self.lng+'</span>'); 

     // Create the infowindow for placement on the map, when a marker is clicked 
     self.infowindow = new google.maps.InfoWindow({ 
      content: infocontent.join(""), 
      position: self.point, 
      pixelOffset: new google.maps.Size(0, -15) // Offset the infowindow by 15px to the top 
     }); 

    }, 

    // Append the marker to the map 
    addToMap: function() { 
     var self = this; 

     self.marker.setMap(self.map); 
    }, 

    // Creates a sidebar module for the item, connected to the marker, etc.. 
    sidebarItem: function() { 
     var self = this; 

     if (self.sidebar) { 
      return self.sidebar; 
     } 

     var li = $('<li/>').attr({ 'class': 'location', 'id': 'location-'+self.id }), 
      name = $('<span/>').attr('class', 'locationName').html(self.name).appendTo(li), 
      address = $('<span/>').attr('class', 'locationAddress').html(self.address+' <br/> '+self.zipcode+' '+self.city+' '+self.country).appendTo(li); 

     li.addClass(self.rating_class); 

     li.bind('click', function(event) { 
      self.target(); 
     }); 

     self.sidebar = li; 

     return li; 
    }, 

    // This will "target" the store. Center the map and zoom on it, as well as 
    target: function(type) { 
     var self = this; 

     if (locator.targeted) { 
      locator.targeted.infowindow.close(); 
     } 

     locator.targeted = this; 

     if (type != 'map') { 
      self.map.panTo(self.point); 
      self.map.setZoom(14); 
     }; 

     // Open the infowinfow 
     self.infowindow.open(self.map); 
    } 
}; 

for (var i=0; i < locations.length; i++) { 
    var location = new Location(locations[i], self.map); 
    self.locations.push(location); 

    // Add the sidebar item 
    self.location_ul.append(location.sidebarItem()); 

    // Add the map! 
    location.addToMap(); 
}; 

Answer 4

marcador ya tiene identificación única

marker.__gm_id 

Answer 5

Simplemente añadiendo otra solución que funciona para mí .. Usted puede simplemente añadir que en las opciones de marcador:

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

    // Custom Attributes/Data/Key-Values 
    store_id: id, 
    store_address: address, 
    store_type: type 
}); 

Y luego recupérelos con:

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