¿Cómo puedo cambiar el color de un marcador de Google Maps?

167

Estoy usando la API de Google Maps para crear un mapa lleno de marcadores, pero quiero que un marcador se destaque de los demás. Creo que lo más sencillo sería cambiar el color del marcador a azul, en lugar de rojo. ¿Es esto algo simple o tengo que crear un ícono completamente nuevo de alguna manera? Si tengo que crear un nuevo ícono, ¿cuál es la forma más fácil de hacerlo?

abeger
fuente
2
Es posible que desee consultar esta publicación de ayer: stackoverflow.com/questions/2467720/…
Daniel Vassallo
o tal vez una mejor publicación stackoverflow.com/questions/7095574/…
Faizan

Respuestas:

45

Dado que los mapas v2 están en desuso, probablemente esté interesado en los mapas v3: https://developers.google.com/maps/documentation/javascript/markers#simple_icons

Para mapas v2:

http://code.google.com/apis/maps/documentation/overlays.html#Icons_overview

Tendría que un conjunto de lógica haga todos los pines 'regulares', y otro que haga los pines 'especiales' usando el nuevo marcador definido.

Kevin
fuente
24
Nota para futuros lectores: Esto es para Google Maps API v2 que está en desuso. Si está utilizando v3, entonces debe buscar en otro lado.
priestc
12
Hice clic en el primer enlace, ctrl-f para 'color': sin resultados. Sería genial agregar más detalles a la respuesta para responder realmente la pregunta. El OP pregunta específicamente si es posible cambiar el color sin crear un nuevo icono.
qwertzguy
125

Con la versión 3 de la API de Google Maps, la forma más fácil de hacerlo puede ser tomando un conjunto de iconos personalizado, como el que Benjamin Keen ha creado aquí:

http://www.benjaminkeen.com/?p=105

Si coloca todos esos íconos en el mismo lugar que su página de mapa, puede colorear un Marcador simplemente usando la opción de ícono apropiada al crearlo:

var beachMarker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: 'brown_markerA.png'
});

Esto es muy fácil y es el enfoque que estoy usando para el proyecto en el que estoy trabajando actualmente.

Sean McMains
fuente
66
Esta respuesta es asombrosa. Me entristeció que la respuesta aceptada sea para V2, pero afortunadamente el desplazamiento valió la pena. ¡Gracias!
Adam Tuttle
Creé una versión que no se basa en imágenes: stackoverflow.com/a/23163930/1689770
Jonathan
49

MapIconMaker: una biblioteca para Google Maps v2

Una forma es usar MapIconMaker (deadlink). Hay un ejemplo aquí (deadlink). Los íconos predeterminados de Google Maps tienen 20px de ancho y 34px de alto, por lo que podría usar algo como esto para emular:

var newIcon = MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: "#0000FF", cornercolor:"#0000FF"});
var marker = new GMarker(map.getCenter(), {icon: newIcon});

Incluso podría incluirlo en alguna función para facilitarle las cosas:

function getIcon(color) {
    return MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: color, cornercolor:color});
}

Eso es lo que personalmente uso para todos los marcadores que creo. Prefiero tener la opción de cambiar los colores de un capricho.

Actualización: el color hexadecimal del icono predeterminado es "# FE7569". Además, puede establecer la imagen en un marcador en lugar de crear un nuevo marcador con un nuevo icono. Entonces, si desea que una función se destaque, puede optar por algo como esto, utilizando la función anterior:

function highlightMarker(marker, highlight) {
    var color = "#FE7569";
    if (highlight) {
        color = "#0000FF";
    }
    marker.setImage(getIcon(color).image);
}

StyledMarker: una biblioteca para Google Maps v3

Como V2 fue reemplazado por V3 hace algún tiempo, pensé que debería actualizar esta respuesta. Creé una biblioteca para marcadores personalizados que se pueden encontrar en la Biblioteca de utilidades V3 aquíCreé (enlace inactivo). Permite diferentes colores y formas, y también puede colocar texto en el marcador. Funciona mediante el uso de la API de Google Charts, que tiene métodos para crear marcadores de tipo Google Maps. Siéntase libre de mirar el código fuente si prefiere usar la API de Google Charts directamente.

Sin embargo, lo que pasa con esa biblioteca es que se encarga de definir las regiones en las que se puede hacer clic para estas imágenes de marcador, por lo que, por ejemplo, la burbuja más larga con texto tendrá las regiones en las que se puede hacer clic, como este ejemplo (enlace inactivo).

Beto
fuente
3
¿Parece ser que esto solo es compatible con GMaps API v2?
Tigraine
77
@Tigraine Realmente hice una biblioteca completamente nueva para usar para v3 llamada "StyledMarker" que se puede encontrar en la biblioteca de utilidad v3: code.google.com/p/google-maps-utility-library-v3/wiki/Libraries
Bob
mira la respuesta de Sean McMains para v3
smp7d
@Matt Originalmente, sí, solo era v2. Desde entonces, he actualizado para incluir una solución v3
Bob,
Para su información, "setImage" no es una función del mercado en Google Maps API v3. "setIcon" es la función correcta para usar.
Nick Bork
39

ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí Diseño de materiales

EDITADO EN MARZO 2019 ahora con color pin programático,

JAVASCRIPT PURO, SIN IMÁGENES, ETIQUETAS DE APOYO

ya no se basa en API de gráficos obsoletos

    var pinColor = "#FFFFFF";
    var pinLabel = "A";

    // Pick your pin (hole or no hole)
    var pinSVGHole = "M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z";
    var labelOriginHole = new google.maps.Point(12,15);
    var pinSVGFilled = "M 12,2 C 8.1340068,2 5,5.1340068 5,9 c 0,5.25 7,13 7,13 0,0 7,-7.75 7,-13 0,-3.8659932 -3.134007,-7 -7,-7 z";
    var labelOriginFilled =  new google.maps.Point(12,9);


    var markerImage = {  // https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerLabel
        path: pinSVGFilled,
        anchor: new google.maps.Point(12,17),
        fillOpacity: 1,
        fillColor: pinColor,
        strokeWeight: 2,
        strokeColor: "white",
        scale: 2,
        labelOrigin: labelOriginFilled
    };
    var label = {
        text: pinLabel,
        color: "white",
        fontSize: "12px",
    }; // https://developers.google.com/maps/documentation/javascript/reference/marker#Symbol
    this.marker        = new google.maps.Marker({
        map: map.MapObject,
        //OPTIONAL: label: label,
        position: this.geographicCoordinates,
        icon: markerImage,
        //OPTIONAL: animation: google.maps.Animation.DROP,
    });
Jonathan
fuente
2
Desafortunadamente, esta característica ha quedado en desuso como puede ver aquí . Esta es una situación tan decepcionante, donde esto está en desuso y la versión anterior que usé MapIconMaker, ya ha quedado en desuso.
zerowords
Tenga en cuenta que esto no funciona con https, solo http. ¡Gorrón!
JoeGalind
@JoeGalind, ¿hay alguna razón por la que se requiera cifrado al buscar colores? Quiero decir, no veo ningún riesgo de seguridad para usar a httpmenos que exponga algo que no conozco en el encabezado
Jonathan
@ JonathanLeaders: Esto significa que debe agregar el dominio a la lista permitida en la lista de información de su proyecto, ya que no es una llamada https.
JoeGalind
66
Actualizado para 2019, ya no está en desuso
Jonathan
12

La forma más simple que encontré es usar BitmapDescriptorFactory.defaultMarker () la documentación incluso tiene un ejemplo de configuración del color. De mi propio código:

MarkerOptions marker = new MarkerOptions()
            .title(formatInfo(data))
            .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
            .position(new LatLng(data.getLatitude(), data.getLongitude()))
Michael Hamilton
fuente
¿Es solo Android o también para navegadores web?
Jonathan
@ Jonathan - esto es solo para Android - el ejemplo que publicó está en JAVA
dazza5000
2

Para personalizar los marcadores, puede hacerlo desde esta herramienta en línea: https://materialdesignicons.com/

En su caso, desea el marcador de mapa que está disponible aquí: https://materialdesignicons.com/icon/map-marker y que puede personalizar en línea.

Si simplemente desea cambiar el color rojo predeterminado a azul, puede cargar este icono: http://maps.google.com/mapfiles/ms/icons/blue-dot.png

Se ha mencionado en este hilo: https://stackoverflow.com/a/32651327/6381715

GuGuss
fuente