API 3 de Google Maps: 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 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.
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í: la 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í: 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:
Crédito a Jack B Nimble por la inspiración;)
Si utiliza Google Maps API v3, puede utilizar, setIcon
por 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
- marcador rojo
- marcador morado
- marcador amarillo
- marcador verde
Utilice el siguiente código para actualizar los marcadores predeterminados con diferentes colores.
(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)