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

Solución:

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

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

Si coloca todos esos íconos en el mismo lugar que la página de su 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.

MapIconMaker: una biblioteca para Google Maps v2

Una forma es utilizar el MapIconMaker(enlace muerto). Hay un ejemplo aquí(enlace muerto). Los iconos predeterminados de Google Maps tienen 20 píxeles de ancho y 34 píxeles de alto, por lo que podrías 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 envolverlo en alguna función para facilitar aún más las cosas:

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

Eso es lo que uso personalmente para todos los marcadores que creo. Prefiero tener la opción de cambiar de color por 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 resaltar una función, puede optar por 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 para Google Maps v3

Dado que V2 fue reemplazado por V3 hace algún tiempo, pensé que debería actualizar esta respuesta. Creé una biblioteca para marcadores personalizados que se puede encontrar en la biblioteca de utilidades V3 aquí(enlace muerto). 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 de Google Maps. No dude en consultar el código fuente si prefiere utilizar 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 de estas imágenes de marcadores por usted, por lo que, por ejemplo, la burbuja más larga con texto tendrá las regiones en las que se puede hacer clic que uno espera, como este ejemplo(enlace muerto).

Diseño de materiales

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

JAVASCRIPT PURO, SIN IMÁGENES, SOPORTA ETIQUETAS

ya no depende de la API de gráficos obsoleta

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

---

---

Utiliza Nuestro Buscador