Google Maps API 3 – Color de marcador personalizado para el marcador predeterminado (punto)

He visto muchas otras preguntas similares a esta ( aquí , aquí y aquí ), pero todas han aceptado respuestas que no resuelven mi problema. La mejor solución que he encontrado para el problema es la biblioteca StyledMarker , que te permite definir colores personalizados para los marcadores, pero no puedo conseguir que use el marcador predeterminado (el que obtienes cuando haces una búsqueda en Google Maps – con un punto en el medio), simplemente parece proporcionar marcadores con una letra, o con un icono especial.

Puede solicitar dinámicamente imágenes de icono de la API de Google api con las direcciones URL:

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569 

Que se ve así: color predeterminado la imagen es de 21×34 píxeles y la punta del alfiler está en la posición (10, 34)

Y también querrá una imagen de sombra separada (para que no se superponga a los icons cercanos):

 http://chart.apis.google.com/chart?chst=d_map_pin_shadow 

Que se ve así: enter image description here la imagen es de 40×37 píxeles y la punta del alfiler está en la posición (12, 35)

Cuando construyes tu MarkerImage s necesitas establecer el tamaño y los puntos de anclaje en consecuencia:

  var pinColor = "FE7569"; var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor, new google.maps.Size(21, 34), new google.maps.Point(0,0), new google.maps.Point(10, 34)); var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow", new google.maps.Size(40, 37), new google.maps.Point(0, 0), new google.maps.Point(12, 35)); 

A continuación, puede agregar el marcador a su mapa con:

  var marker = new google.maps.Marker({ position: new google.maps.LatLng(0,0), map: map, icon: pinImage, shadow: pinShadow }); 

Simplemente reemplace “FE7569” con el código de color que busca. P.ej: color predeterminadoverdeamarillo

Crédito debido a Jack B Nimble por la inspiración;)

Si usa Google Maps API v3, puede usar setIcon por ej.

 marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png') 

O como parte del marcador init:

 marker = new google.maps.Marker({ icon: 'http://...' }); 

Otros colores

  • Marcador azul
  • enter image description here Marcador rojo
  • enter image description here Marcador morado
  • enter image description here Marcador amarillo
  • enter image description here Marcador verde

Use la siguiente pieza de código para actualizar los marcadores predeterminados con diferentes colores.

 (BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE) 

Aquí hay una buena solución que usa la API de Gooogle Maps. Sin servicio externo, sin biblioteca adicional. Y permite formas personalizadas y múltiples colores y estilos. La solución usa marcadores vectoriales, que googlemaps api llama Símbolos .

Además de los pocos y limitados símbolos predefinidos, puede crear cualquier forma de cualquier color especificando una cadena de ruta SVG ( Spec ).

Para usarlo, en lugar de configurar la opción de marcador ‘icono’ en la url de la imagen, la configura en un diccionario que contiene las opciones del símbolo. Como ejemplo, logré crear un símbolo que es bastante similar al marcador estándar:

 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 M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0', fillColor: color, fillOpacity: 1, strokeColor: '#000', strokeWeight: 2, scale: 1, }; } var marker = new google.maps.Marker({ map: map, position: new google.maps.LatLng(latitude, longitude), icon: pinSymbol("#FFF"), }); 

Vector Marker

Si tiene cuidado de mantener el punto clave de forma en 0,0, evita tener que definir los parámetros de centrado del icono marcador. Otro ejemplo de ruta, el mismo marcador sin el punto:

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

Dotless Vector Marker

Y aquí tienes una bandera de color muy simple y fea:

  path: 'M 0,0 -1,-2 V -43 H 1 V -2 z M 1,-40 H 30 V -20 H 1 z', 

Bandera del vector

También puede crear las rutas usando una herramienta visual como Inkscape (GNU-GPL, multiplataforma). Algunos consejos útiles:

  • La API de Google solo acepta una sola ruta, por lo que debe convertir cualquier otro objeto (cuadrado, círculo …) en una ruta y unirlos como uno solo. Ambos comandos en el menú Ruta.
  • Para mover la ruta al (0,0), vaya al modo Editar ruta (F2), seleccione todos los nodos de control y arrástrelos. Mover el objeto con F1 no cambiará las coordenadas del nodo de ruta.
  • Para asegurarse de que el punto de referencia esté en (0,0), puede seleccionarlo solo y editar los coords a mano en la barra de herramientas superior.
  • Después de guardar el archivo SVG, que es un XML, ábralo con un editor, busque el elemento svg: path y copie el contenido del atributo ‘d’.

Bueno, lo más parecido que he podido obtener con StyledMarker es esto .

Sin embargo, la bala en el medio no es tan grande como la predeterminada. La clase StyledMarker simplemente crea esta url y le pide a la API de Google que cree el marcador .

Desde el ejemplo de uso de clase use “% E2% 80% A2” como su texto, como en:

 var styleMaker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{text:"%E2%80%A2"},styleIconClass),position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map}); 

Deberá modificar StyledMarker.js para comentar las líneas:

  if (text_) { text_ = text_.substr(0,2); } 

ya que esto recortará la cadena de texto a 2 caracteres.

Alternativamente, puede crear imágenes de marcador personalizadas basadas en la imagen predeterminada con los colores que desee y anular el marcador predeterminado con un código como este:

 marker = new google.maps.Marker({ map:map, position: latlng, icon: new google.maps.MarkerImage( 'http://www.gettyicons.com/free-icons/108/gis-gps/png/24/needle_left_yellow_2_24.png', new google.maps.Size(24, 24), new google.maps.Point(0, 0), new google.maps.Point(0, 24) ) }); 

Hola, puedes usar el icono como SVG y establecer colores. Ver este código

 /* * declare map and places as a global variable */ var map; var places = [ ['Place 1', "

Title 1

", -0.690542, -76.174856,"red"], ['Place 2', "

Title 2

", -5.028249, -57.659052,"blue"], ['Place 3', "

Title 3

", -0.028249, -77.757507,"green"], ['Place 4', "

Title 4

", -0.800101286, -76.78747820,"orange"], ['Place 5', "

Title 5

", -0.950198, -78.959302,"#FF33AA"] ]; /* * use google maps api built-in mechanism to attach dom events */ google.maps.event.addDomListener(window, "load", function () { /* * create map */ var map = new google.maps.Map(document.getElementById("map_div"), { mapTypeId: google.maps.MapTypeId.ROADMAP, }); /* * create infowindow (which will be used by markers) */ var infoWindow = new google.maps.InfoWindow(); /* * create bounds (which will be used auto zoom map) */ var bounds = new google.maps.LatLngBounds(); /* * marker creater function (acts as a closure for html parameter) */ function createMarker(options, html) { var marker = new google.maps.Marker(options); bounds.extend(options.position); if (html) { google.maps.event.addListener(marker, "click", function () { infoWindow.setContent(html); infoWindow.open(options.map, this); map.setZoom(map.getZoom() + 1) map.setCenter(marker.getPosition()); }); } return marker; } /* * add markers to map */ for (var i = 0; i < places.length; i++) { var point = places[i]; createMarker({ position: new google.maps.LatLng(point[2], point[3]), map: map, icon: { path: "M27.648 -41.399q0 -3.816 -2.7 -6.516t-6.516 -2.7 -6.516 2.7 -2.7 6.516 2.7 6.516 6.516 2.7 6.516 -2.7 2.7 -6.516zm9.216 0q0 3.924 -1.188 6.444l-13.104 27.864q-0.576 1.188 -1.71 1.872t-2.43 0.684 -2.43 -0.684 -1.674 -1.872l-13.14 -27.864q-1.188 -2.52 -1.188 -6.444 0 -7.632 5.4 -13.032t13.032 -5.4 13.032 5.4 5.4 13.032z", scale: 0.6, strokeWeight: 0.2, strokeColor: 'black', strokeOpacity: 1, fillColor: point[4], fillOpacity: 0.85, }, }, point[1]); }; map.fitBounds(bounds); });
  

He extendido la respuesta de vokimon un poco, por lo que es un poco más conveniente para cambiar otras propiedades también.

 function customIcon (opts) { return Object.assign({ 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 M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0', fillColor: '#34495e', fillOpacity: 1, strokeColor: '#000', strokeWeight: 2, scale: 1, }, opts); } 

Uso:

 marker.setIcon(customIcon({ fillColor: '#fff', strokeColor: '#000' })); 

O al definir un nuevo marcador:

 const marker = new google.maps.Marker({ position: { lat: ..., lng: ... }, icon: customIcon({ fillColor: '#2ecc71' }), map: map }); 

desde la versión 3.11 de la API de google maps, el objeto Icon reemplaza a MarkerImage . Icon admite los mismos parámetros que MarkerImage. Incluso encontré que es un poco más directo.

Un ejemplo podría verse así:

 var image = { url: place.icon, size: new google.maps.Size(71, 71), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(17, 34), scaledSize: new google.maps.Size(25, 25) }; 

para más información, consulte este sitio

En Internet Explorer , esta solución no funciona en ssl.

Uno puede ver el error en la consola como:

SEC7111 : la seguridad de HTTPS está comprometida por esto ,

Solución : como uno de los usuarios aquí sugirió reemplazar chart.apis.google.com a chart.googleapis.com por la ruta de la URL para evitar el error de SSL.

Puedes usar este código, funciona bien.

  var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/");
var marker = new google.maps.Marker({ position: yourlatlong, icon: pinImage, map: map });

Intento dos maneras de crear el marcador de mapa de google personalizado, este código de ejecución utilizado es la mejor compatibilidad para el navegador. El código comentado no es compatible con IE11 actualmente.

 var marker; var CustomShapeCoords = [16, 1.14, 21, 2.1, 25, 4.2, 28, 7.4, 30, 11.3, 30.6, 15.74, 25.85, 26.49, 21.02, 31.89, 15.92, 43.86, 10.92, 31.89, 5.9, 26.26, 1.4, 15.74, 2.1, 11.3, 4, 7.4, 7.1, 4.2, 11, 2.1, 16, 1.14]; function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 13, center: { lat: 59.325, lng: 18.070 } }); var markerOption = { latitude: 59.327, longitude: 18.067, color: "#" + "000", text: "ha" }; marker = createMarker(markerOption); marker.setMap(map); marker.addListener('click', changeColorAndText); }; function changeColorAndText() { var iconTmpObj = createSvgIcon( "#c00", "ok" ); marker.setOptions( { icon: iconTmpObj } ); }; function createMarker(options) { //IE MarkerShape has problem var markerObj = new google.maps.Marker({ icon: createSvgIcon(options.color, options.text), position: { lat: parseFloat(options.latitude), lng: parseFloat(options.longitude) }, draggable: false, visible: true, zIndex: 10, shape: { coords: CustomShapeCoords, type: 'poly' } }); return markerObj; }; function createSvgIcon(color, text) { var div = $("
"); var svg = $( '' + '' + '' + '' + text + '' + '' ); div.append(svg); var dd = $(""); var svgHtml = div[0].innerHTML; //todo yao gai bu dui canvg(dd[0], svgHtml); var imgSrc = dd[0].toDataURL("image/png"); //"scaledSize" and "optimized: false" together seems did the tricky ---IE11 && viewBox influent IE scaledSize //var svg = '' // + '' // + '' // + '' + text + '' // + ''; //var imgSrc = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg); var iconObj = { size: new google.maps.Size(32, 43), url: imgSrc, scaledSize: new google.maps.Size(32, 43) }; return iconObj; };
     Your Custom Marker     

Combine un marcador basado en símbolos cuyo trazado dibuje el contorno, con un carácter ‘●’ para el centro. Puede sustituir el punto por otro texto (‘A’, ‘B’, etc.) como desee.

Esta función devuelve opciones para un marcador con el texto dado (si existe), el color del texto y el color de relleno. Utiliza el color del texto para el contorno.

 function createSymbolMarkerOptions(text, textColor, fillColor) { return { icon: { 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: fillColor, fillOpacity: 1, strokeColor: textColor, strokeWeight: 1.8, labelOrigin: { x: 0, y: -30 } }, label: { text: text || '●', color: textColor } }; } 

cámbielo a chart.googleapis.com por la ruta, de lo contrario SSL no funcionará

Utilizando Swift y Google Maps Api v3, esta fue la forma más fácil de hacerlo:

 icon = GMSMarker.markerImageWithColor(UIColor.blackColor()) 

Espero que ayude a alguien.

Estos son vestuarios marcadores circulares

small_red:

 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NUlH5v9rF5f+ZoCAwHaig8B8oPhOmKC1NU/P//7Q0DByrqgpSGAtSdOCAry9WRXt9fECK9oIUPXwYFYVV0e2ICJCi20SbFAuyG5uiECUlkKIQmOPng3y30d0d7Lt1bm4w301jQAOgcNoIDad1yOEEAFm9fSv/VqtJAAAAAElFTkSuQmCC 

small_yellow:

 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NijL7v3p1+v8zZ6rAdGCg4X+g+EyYorS0NNv////PxMCxsRYghbEgRQcOHCjGqmjv3kKQor0gRQ8fPmzHquj27WaQottEmxQLshubopAQI5CiEJjj54N8t3FjFth369ZlwHw3jQENgMJpIzSc1iGHEwB8p5qDBbsHtAAAAABJRU5ErkJggg== 

small_green:

 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiElEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81izL7n746/X/VmSowbRho+B8oPhOmKM02zfb/TCzQItYCpDAWpOhA8YFirIoK9xaCFO0FKXrY/rAdq6Lm280gRbeJNikWZDc2RUYhRiBFITDHzwf5LmtjFth3GesyYL6bxoAGQOG0ERpO65DDCQDX7ovT++K9KQAAAABJRU5ErkJggg== 

small_blue:

 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81M4v6n56++n9V1RkwbWgY+B8oPhOmKM3WNu3/zJn/MbCFRSxIYSxI0YHi4gNYFRUW7gUp2gtS9LC9/SFWRc3Nt0GKbhNtUizIbmyKjIxCQIpCYI6fD/JdVtZGsO8yMtbBfDeNAQ2AwmkjNJzWIYcTAMk+i9OhipcQAAAAAElFTkSuQmCC 

small_purple:

 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NMov6vzp99f8zVWfAdKBh4H+g+EyYorQ027T//2f+x8CxFrEghbEgRQcOFB/Aqmhv4V6Qor0gRQ8ftj/Equh2822QottEmxQLshubohCjEJCiEJjj54N8tzFrI9h36zLWwXw3jQENgMJpIzSc1iGHEwBt95qDejjnKAAAAABJRU5ErkJggg== 

Son imágenes de 9×9 png.

Una vez que estén en su página, puede arrastrarlos y tendrá el archivo png real.

Intenté durante mucho tiempo mejorar el marcador dibujado de vokimon y hacerlo más similar a Google Maps uno (y lo logré bastante). Este es el código que obtuve:

 let circle=true; path = 'M 0,0 C -0.7,-9 -3,-14 -5.5,-18.5 '+ 'A 16,16 0 0,1 -11,-29 '+ 'A 11,11 0 1,1 11,-29 '+ 'A 16,16 0 0,1 5.5,-18.5 '+ 'C 3,-14 0.7,-9 0,0 z '+ ['', 'M -2,-28 '+ 'a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0'][new Number(circle)]; 

También lo escaleré por 0.8.