google-maps - style - google.maps.marker example

Google Maps Marker Label con varios caracteres

Question

Estoy tratando de agregar una etiqueta de 4 caracteres (por ejemplo, ''A123'') a un marcador de Google Maps que tiene un icono 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 API de etiqueta de marcador está restringida a un solo carácter, por lo que solo muestra un marcador con ''A'' en el ejemplo anterior. Intenté usar las herramientas de desarrollador de Chrome para hackear el html creado por gmaps y restablecer la etiqueta más larga. Se muestra perfectamente sin modificaciones en el CSS requerido, por lo que solo necesito encontrar una manera de restablecer los otros caracteres de etiquetas que Google Maps ha eliminado.

Planteé un problema de Google Maps para solicitar que se elimine esta restricción. Considere votar por el problema de Google visitando el enlace de arriba y marcando el problema para alentar a Google a solucionarlo, ¡gracias!

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

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

Answer 1

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

Pruébalo, funciona!

Además, al usar un objeto MarkerLabel en lugar de solo una cadena, puede establecer una serie de propiedades para la apariencia, y si usa un icono personalizado, puede configurar 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 vinculado anterior)

Answer 2

En primer lugar, ¡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 algún error de carga js en el código aquí, pero funciona 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
}

<div id="map-canvas"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDtc3qowwB96ObzSu2vvjEoM2pVhZRQNSA&signed_in=true&callback=initMap&libraries=drawing,places"></script>

Solo necesita codificar con uri su html SVG y reemplazar el de la variable de imagen después de "data: image / svg + xml" en el bucle for.

Para la codificación uri puede usar uri-encoder-decoder

Puede decodificar el código svg existente primero para comprender mejor lo que está escrito.

Answer 3

OK, aquí hay una solución que se me ocurrió y que está bastante desordenada.

Puse el texto completo de la etiqueta en el div usando el atributo de etiqueta fontFamily. Luego uso querySelectorAll para que coincida con los atributos de estilo resultantes para extraer las referencias y reescribir las etiquetas una vez que el mapa se ha 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?

Answer 4

Para cualquiera que intente

• " Mostrar texto debajo del marcador en Google Maps ", o
• " Etiqueta de marcador de Google Maps con varios caracteres "

... en 2019, vale la pena señalar que parte del código al que se hace referencia aquí ya no existe (oficialmente). Google suspendió el soporte para el proyecto "MarkerWithLabel" hace mucho tiempo. Originalmente estaba alojado en el código de Google aquí , ahora está alojado de forma no oficial en Github aquí .

Pero hay otro proyecto que Google mantuvo hasta 2016, llamado "MapLabel" . Ese enfoque es diferente (y posiblemente mejor). Crea un objeto de etiqueta de mapa separado con el mismo origen que el marcador en lugar de agregar una opción mapLabel al marcador en sí. Puede hacer un marcador con etiqueta con varios caracteres usando js-marker-label .

Answer 5

Puede usar MarkerWithLabel con iconos SVG.

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

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

Nota: hay un problema con las etiquetas en los marcadores superpuestos que se aborda en esta corrección , crédito a quien 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;
}

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map_canvas" style="height: 400px; width: 100%;"></div>

Answer 6

Una solución mucho más simple a este problema que permite letras, números y palabras como la etiqueta es el siguiente código. Más específicamente, la línea de código que comienza con "icon:". Cualquier cadena o variable podría ser sustituida 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 los valores lat y long y k es el número de fila de la dirección que estaba asignando. En otras palabras, si tuviera 100 direcciones para mapear las etiquetas de mis marcadores sería de 1 a 100.