Google Maps marcador V3 con la etiqueta

Question

¿Cómo puedo agregar una etiqueta a mi marcador si mis marcadores se rellenan con éxito en ajax en cada resultado?

map.gmap('addMarker', { 'position': new google.maps.LatLng(result.latitude, result.longitude) }); 

Traté de este tipo, pero sin éxito:

map.gmap('addMarker', { 
    'position': new google.maps.LatLng(result.latitude, result.longitude), 
    'bounds': true, 
    'icon': markerIcon, 
    'labelContent': 'A', 
    'labelAnchor': new google.maps.Point(result.latitude, result.longitude), 
    'labelClass': 'labels', // the CSS class for the label 
    'labelInBackground': false 
}); 

Answer 1

que dudan de la biblioteca estándar es compatible con esta.

Pero se puede utilizar la biblioteca de utilidades Google Maps:

http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries#MarkerWithLabel

var myLatlng = new google.maps.LatLng(-25.363882,131.044922); 

var myOptions = { 
    zoom: 8, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); 

var marker = new MarkerWithLabel({ 
    position: myLatlng, 
    map: map, 
    draggable: true, 
    raiseOnDrag: true, 
    labelContent: "A", 
    labelAnchor: new google.maps.Point(3, 30), 
    labelClass: "labels", // the CSS class for the label 
    labelInBackground: false 
}); 

Los conceptos básicos sobre marcadores se pueden encontrar aquí: https://developers.google.com/maps/documentation/javascript/overlays#Markers

Answer 2

La manera de hacer esto sin el uso de plugins es hacer una subclase del método OverlayView() de google.

https://developers.google.com/maps/documentation/javascript/reference?hl=en#OverlayView

Se crea una función personalizada y aplicarla al mapa.

function Label() { 
    this.setMap(g.map); 
}; 

Ahora prototipo de la subclase y añadir nodos HTML:

Label.prototype = new google.maps.OverlayView; //subclassing google's overlayView 
Label.prototype.onAdd = function() { 
     this.MySpecialDiv    = document.createElement('div'); 
     this.MySpecialDiv.className  = 'MyLabel'; 
     this.getPanes().overlayImage.appendChild(this.MySpecialDiv); //attach it to overlay panes so it behaves like markers 

}

también hay que aplicar quitar funciones y dibujar como se indica en los documentos de la API, o esto no trabajo.

Label.prototype.onRemove = function() { 
... // remove your stuff and its events if any 
} 
Label.prototype.draw = function() { 
     var position = this.getProjection().fromLatLngToDivPixel(this.get('position')); // translate map latLng coords into DOM px coords for css positioning 
var pos = this.get('position'); 
      $('.myLabel') 
      .css({ 
       'top' : position.y + 'px', 
       'left' : position.x + 'px' 
      }) 
     ; 
} 

Esa es la esencia de esto, tendrás que trabajar un poco más en tu implementación específica.

Answer 3

Si lo que desea es mostrar la etiqueta debajo del marcador, a continuación, puede ampliar los mapas de Google Marcador para agregar un método de selección para la etiqueta y se puede definir el objeto de etiqueta mediante la extensión de los mapas de Google OverlayView como esto ..

<script type="text/javascript"> 
    var point = { lat: 22.5667, lng: 88.3667 }; 
    var markerSize = { x: 22, y: 40 }; 


    google.maps.Marker.prototype.setLabel = function(label){ 
     this.label = new MarkerLabel({ 
      map: this.map, 
      marker: this, 
      text: label 
     }); 
     this.label.bindTo('position', this, 'position'); 
    }; 

    var MarkerLabel = function(options) { 
     this.setValues(options); 
     this.span = document.createElement('span'); 
     this.span.className = 'map-marker-label'; 
    }; 

    MarkerLabel.prototype = $.extend(new google.maps.OverlayView(), { 
     onAdd: function() { 
      this.getPanes().overlayImage.appendChild(this.span); 
      var self = this; 
      this.listeners = [ 
      google.maps.event.addListener(this, 'position_changed', function() { self.draw(); })]; 
     }, 
     draw: function() { 
      var text = String(this.get('text')); 
      var position = this.getProjection().fromLatLngToDivPixel(this.get('position')); 
      this.span.innerHTML = text; 
      this.span.style.left = (position.x - (markerSize.x/2)) - (text.length * 3) + 10 + 'px'; 
      this.span.style.top = (position.y - markerSize.y + 40) + 'px'; 
     } 
    }); 
    function initialize(){ 
     var myLatLng = new google.maps.LatLng(point.lat, point.lng); 
     var gmap = new google.maps.Map(document.getElementById('map_canvas'), { 
      zoom: 5, 
      center: myLatLng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     var myMarker = new google.maps.Marker({ 
      map: gmap, 
      position: myLatLng, 
      label: 'Hello World!', 
      draggable: true 
     }); 
    } 
</script> 
<style> 
    .map-marker-label{ 
     position: absolute; 
    color: blue; 
    font-size: 16px; 
    font-weight: bold; 
    } 
</style> 

Esto funcionará.

Answer 4

Compatibilidad con etiquetas de marcador de un solo carácter era added to Google Maps en la versión 3.21 (agosto de 2015). Vea el new marker label API.

Ahora puede crear su marcador de etiqueta de la siguiente manera:

var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(result.latitude, result.longitude), 
    icon: markerIcon, 
    label: { 
    text: 'A' 
    } 
}); 

Si desea ver la restricción 1 carácter eliminado, por favor voten por this issue.

actualización de octubre de 2016:

Este problema was fixed y partir de la versión 3.26.10, Google Maps de forma nativa soporta múltiples etiquetas de caracteres en combinación con los iconos personalizados utilizando MarkerLabels.