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

google.maps.marker color

Question

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

Answer 1

MapIconMaker: una biblioteca para Google Maps v2

Una forma es usar MapIconMaker . Hay un ejemplo here . Los íconos por defecto de Google Maps son de 20 píxeles de ancho y 34 píxeles 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 envolverlo en alguna función para hacer las cosas aún más fáciles para usted:

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 Imagen en un Marcador en lugar de crear un Marcador nuevo con un ícono nuevo. Entonces, si desea resaltar una función, podría ir con 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

Desde 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 la utilidad V3 here . Permite diferentes colores y formas, y también puedes colocar texto en el marcador. Funciona mediante el uso de la API de Google Charts que tiene métodos para crear marcadores de tipos de Google Maps. No dude en consultar el código fuente si prefiere usar la API de Google Charts directamente.

Lo que pasa con esa biblioteca, sin embargo, es que se encarga de definir las regiones clicables de estas imágenes de marcador, así que, por ejemplo, la burbuja más larga con texto tendrá las regiones clicables que uno espera, como en este ejemplo .

Answer 2

Como 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 un conjunto de lógica con todos los pines ''regulares'', y otro con los pines ''especiales'' con el nuevo marcador definido.

Answer 3

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

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

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

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

Esto es súper fácil, y es el enfoque que estoy usando para el proyecto en el que estoy trabajando actualmente.

Answer 4

La forma más sencilla que encontré es utilizar BitmapDescriptorFactory.defaultMarker () documentation incluso la documentation 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()))

Answer 5

No necesita ninguna biblioteca personalizada para Google Maps v3.

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));
var marker = new google.maps.Marker({
            position: new google.maps.LatLng(0,0), 
            map: map,
            icon: pinImage,
            shadow: pinShadow
        });

de Matt Burns. Funciona a partir de octubre de 2014, pero está en desuso.

Answer 6

Para personalizar 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://.com/a/32651327/6381715

Answer 7

Personalmente, creo que los iconos generados por la API de Google Charts se ven geniales y son fáciles de personalizar dinámicamente.

Ver mi respuesta en Google Maps API 3 - Color de marcador personalizado para el marcador predeterminado (punto)