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

StackOverflow https://stackoverflow.com/questions/2472957

  •  20-09-2019
  •  | 
  •  

Pregunta

Estoy usando la API de Google Maps para construir un mapa completo de los marcadores, pero quiero un marcador que se destacan de los demás. Lo más sencillo que hacer, creo, sería cambiar el color del marcador de azul, en lugar de rojo. ¿Es esto una cosa simple de hacer o tengo que crear un nuevo icono conjunto de alguna manera? Si tengo que crear un nuevo icono, ¿cuál es la forma más fácil de hacer eso?

¿Fue útil?

Solución

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

Para los mapas v2:

http://code.google.com/apis/maps/ documentación / overlays.html # Icons_overview

Se podría tener un conjunto de lógica de hacer todas las clavijas 'regulares', y otro que lo hace el pasador 'especial' (s) utilizando el nuevo marcador definido.

Otros consejos

Con la versión 3 de la API de Google Maps, la manera más fácil de hacer esto puede ser por el acaparamiento de un conjunto de iconos personalizados, como el que Benjamin Keen ha creado aquí:

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

Si pones todos esos iconos en el mismo lugar que su página de mapa, puede colorear un marcador, simplemente usando la opción icono correspondiente al crearlo: 

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

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

MapIconMaker: una biblioteca de Google Maps v2

Una forma es utilizar la MapIconMaker . Hay un ejemplo aquí . Google Maps iconos por defecto son 20 píxeles de anchura y altura de 34px, lo que podría utilizar 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 se puede envolver en alguna función para hacer las cosas aún más fácil para ti: 

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

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

Actualización: El color hexagonal del icono predeterminado es "# FE7569". Además, se puede setImage en un marcador en lugar de crear un nuevo marcador con un nuevo icono. Así que si quieres una función para resaltar que podría ir con algo como esto, usando la función anterior: 

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

StyledMarker: una biblioteca de Google Maps v3

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

Lo que pasa con esa biblioteca, sin embargo, es que se encarga de definir las regiones seleccionables de estas imágenes marcadoras para usted, así, por ejemplo, la burbuja ya con el texto tendrá las regiones seleccionables que uno espera, como este ejemplo .

introducir descripción de la imagen aquí introducir descripción de la imagen aquí Diseño de material

EDITADO DE MARZO DE 2019 ahora con el color pin programática,

PURE JAVASCRIPT, NO IMAGES, soportes ETIQUETAS

ya no se basa en la API de gráficos en desuso 

    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,
    });

En lo personal, creo que los iconos gráficos generados por el API de Google ven muy bien y son fáciles de personalizar dinámicamente.

Véase mi respuesta en API de Google Maps 3 - color de la marca personalizada de forma predeterminada (punto) marcador

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

MarkerOptions marker = new MarkerOptions()
            .title(formatInfo(data))
            .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
            .position(new LatLng(data.getLatitude(), data.getLongitude()))

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

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

Si simplemente desea cambiar el color de rojo a azul por defecto, que es posible 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

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top