API 3 de Google Maps: color de marcador personalizado para el marcador predeterminado (punto)

Resuelto jackocnr asked hace 13 años • 18 respuestas

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 al problema es la biblioteca StyledMarker , que te permite definir colores personalizados para los marcadores, pero no puedo lograr 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 un ícono especial.

jackocnr avatar Aug 17 '11 22:08 jackocnr
Aceptado

Puede solicitar dinámicamente imágenes de iconos de la API de gráficos de Google con las URL:

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

Que se ve así: color predeterminadola imagen tiene 21x34 píxeles y la punta del alfiler está en la posición (10, 34)

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

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

Que se ve así: ingrese la descripción de la imagen aquíla imagen tiene 40x37 píxeles y la punta del alfiler está en la posición (12, 35)

Cuando construyes tus MarkerImage 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));

Luego puedes agregar el marcador a tu 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 a Jack B Nimble por la inspiración;)

matt burns avatar Oct 07 '2011 12:10 matt burns

Si utiliza Google Maps API v3, puede utilizar, setIconpor ejemplo,

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
  • ingrese la descripción de la imagen aquímarcador rojo
  • ingrese la descripción de la imagen aquímarcador morado
  • ingrese la descripción de la imagen aquímarcador amarillo
  • ingrese la descripción de la imagen aquímarcador verde

Utilice el siguiente código para actualizar los marcadores predeterminados con diferentes colores.

(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)
Mike avatar Sep 04 '2013 20:09 Mike