Etiqueta de marcador de Google maps con varios caracteres

Estoy intentando agregar una etiqueta de 4 caracteres (por ejemplo, ‘A123’) a un marcador de Google Maps que tiene un ícono ancho definido con una ruta personalizada.

var marker = new google.maps.Marker({ position: latLon, label: { text: 'A123' }, map: map, icon: { path: 'custom icon path', fillColor: '#000000', labelOrigin: new google.maps.Point(26.5, 20), anchor: new google.maps.Point(26.5, 43) scale: 1, } }); 

La etiqueta del marcador API está restringida a un solo carácter, por lo que solo muestra un marcador con ‘A’ en el ejemplo anterior. He intentado utilizar las herramientas de desarrollo de Chrome para hackear el html que es creado por gmaps y restablecer la etiqueta más larga. Se muestra perfectamente sin modificaciones en el CSS requerido, así que solo necesito encontrar una manera de restablecer los otros caracteres de etiqueta que Google Maps ha eliminado.

Remití un problema de Google Maps para solicitar que se levante esta restricción. Considere votar por el problema de Google visitando el enlace anterior y protagonizando el problema para alentar a Google a solucionarlo. ¡Gracias!

Pero, mientras tanto, ¿hay alguna solución que pueda utilizar para eliminar la restricción de un solo carácter?

¿Hay alguna manera de que pueda crear una extensión personalizada de google.maps.Marker para mostrar mi etiqueta más larga?

Puede usar MarkerWithLabel con icons SVG.

Actualización: la versión 3 de la API de JavaScript de Google Maps ahora admite nativamente varios caracteres en la etiqueta MarkerLabel

prueba de violín del concepto (no proporcionaste tu ícono, así que hice uno)

Nota: existe un problema con las tags en los marcadores superpuestos a los que se dirige esta corrección , credit to robd, que lo mencionó en los comentarios.

fragmento de código:

 function initMap() { var latLng = new google.maps.LatLng(49.47805, -123.84716); var homeLatLng = new google.maps.LatLng(49.47805, -123.84716); var map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 12, center: latLng, mapTypeId: google.maps.MapTypeId.ROADMAP }); var marker = new MarkerWithLabel({ position: homeLatLng, map: map, draggable: true, raiseOnDrag: true, labelContent: "ABCD", labelAnchor: new google.maps.Point(15, 65), labelClass: "labels", // the CSS class for the label labelInBackground: false, icon: pinSymbol('red') }); var iw = new google.maps.InfoWindow({ content: "Home For Sale" }); google.maps.event.addListener(marker, "click", function(e) { iw.open(map, this); }); } function pinSymbol(color) { return { path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z', fillColor: color, fillOpacity: 1, strokeColor: '#000', strokeWeight: 2, scale: 2 }; } google.maps.event.addDomListener(window, 'load', initMap); 
 html, body, #map_canvas { height: 500px; width: 500px; margin: 0px; padding: 0px } .labels { color: white; background-color: red; font-family: "Lucida Grande", "Arial", sans-serif; font-size: 10px; text-align: center; width: 30px; white-space: nowrap; } 
   

Antes que nada, ¡gracias al autor del código!

Encontré el siguiente enlace mientras busco en Google y es muy simple y funciona mejor. Nunca fallaría a menos que SVG esté en desuso.

https://codepen.io/moistpaint/pen/ywFDe/

Hay un error de carga de js en el código aquí, pero está funcionando perfectamente en el enlace codepen.io proporcionado.

 var mapOptions = { zoom: 16, center: new google.maps.LatLng(-37.808846, 144.963435) }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var pinz = [ { 'location':{ 'lat' : -37.807817, 'lon' : 144.958377 }, 'lable' : 2 }, { 'location':{ 'lat' : -37.807885, 'lon' : 144.965415 }, 'lable' : 42 }, { 'location':{ 'lat' : -37.811377, 'lon' : 144.956596 }, 'lable' : 87 }, { 'location':{ 'lat' : -37.811293, 'lon' : 144.962883 }, 'lable' : 145 }, { 'location':{ 'lat' : -37.808089, 'lon' : 144.962089 }, 'lable' : 999 }, ]; for(var i = 0; i <= pinz.length; i++){ var image = 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2238%22%20height%3D%2238%22%20viewBox%3D%220%200%2038%2038%22%3E%3Cpath%20fill%3D%22%23808080%22%20stroke%3D%22%23ccc%22%20stroke-width%3D%22.5%22%20d%3D%22M34.305%2016.234c0%208.83-15.148%2019.158-15.148%2019.158S3.507%2025.065%203.507%2016.1c0-8.505%206.894-14.304%2015.4-14.304%208.504%200%2015.398%205.933%2015.398%2014.438z%22%2F%3E%3Ctext%20transform%3D%22translate%2819%2018.5%29%22%20fill%3D%22%23fff%22%20style%3D%22font-family%3A%20Arial%2C%20sans-serif%3Bfont-weight%3Abold%3Btext-align%3Acenter%3B%22%20font-size%3D%2212%22%20text-anchor%3D%22middle%22%3E' + pinz[i].lable + '%3C%2Ftext%3E%3C%2Fsvg%3E'; var myLatLng = new google.maps.LatLng(pinz[i].location.lat, pinz[i].location.lon); var marker = new google.maps.Marker({ position: myLatLng, map: map, icon: image }); } 
 html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } 
 

OK, aquí hay una solución que he encontrado que está bastante mal.

Pongo el texto completo de la etiqueta en el div usando el atributo de etiqueta fontFamily. Luego uso querySelectorAll para hacer coincidir los atributos de estilo resultantes para sacar los refs y volver a escribir las tags una vez que el mapa se haya cargado:

 var label = "A123"; var marker = new google.maps.Marker({ position: latLon, label: { text: label, // Add in the custom label here fontFamily: 'Roboto, Arial, sans-serif, custom-label-' + label }, map: map, icon: { path: 'custom icon path', fillColor: '#000000', labelOrigin: new google.maps.Point(26.5, 20), anchor: new google.maps.Point(26.5, 43), scale: 1 } }); google.maps.event.addListener(map, 'idle', function() { var labels = document.querySelectorAll("[style*='custom-label']") for (var i = 0; i < labels.length; i++) { // Retrieve the custom labels and rewrite the tag content var matches = labels[i].getAttribute('style').match(/custom-label-(A\d\d\d)/); labels[i].innerHTML = matches[1]; } }); 

Esto parece bastante frágil. ¿Hay algún enfoque que sea menos horrible?

A partir de la API versión 3.26.10, puede establecer la etiqueta del marcador con más de un carácter. La restricción se levanta.

Pruébalo, ¡funciona!

Además, al utilizar un objeto MarkerLabel en lugar de solo una cadena, puede establecer un número de propiedades para la apariencia, y si usa un icono personalizado puede establecer la propiedad labelOrigin para reposicionar la etiqueta.

Fuente: https://code.google.com/p/gmaps-api-issues/issues/detail?id=8578#c30 (también puede informar cualquier problema relacionado con esto en el hilo enlazado anterior)

Una solución mucho más simple a este problema que permite letras, números y palabras ya que la etiqueta es el siguiente código. Más específicamente, la línea de código que comienza con “icono:”. Cualquier cadena o variable podría sustituirse por ‘k’.

 for (i = 0; i < locations.length; i++) { k = i + 1; marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map, icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + k + '|FF0000|000000' }); 

--- la matriz de ubicaciones contiene el lat y long y k es el número de fila para la dirección que estaba mapeando. En otras palabras, si tuviera 100 direcciones para mapear mis tags de marcador serían de 1 a 100.