Como posso alterar a cor de um Google Maps marcador?

Question

Eu estou usando o Google Maps API para criar um mapa cheio de marcadores, mas eu quero um marcador para destacar-se dos demais.A coisa mais simples a se fazer, eu acho, seria mudar a cor do marcador azul, em vez de vermelho.Isso é uma coisa simples de fazer ou tenho que criar todo um novo ícone de alguma forma?Se eu tenho que criar um novo ícone, que é a maneira mais fácil de fazer isso?

Answer 1

Como o MAPS V2 está depreciado, você provavelmente está interessado em 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

Você teria um conjunto de lógicas para fazer todos os pinos 'regulares' e outro que faz os pinos 'especiais' usando o novo marcador definido.

Answer 2

Com a versão 3 da API do Google Maps, a maneira mais fácil de fazer isso pode ser pegando um conjunto de ícones personalizado, como o que Benjamin Keen criou aqui:

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

Se você colocar todos esses ícones no mesmo local da página do seu mapa, poderá colorizar um marcador simplesmente usando a opção de ícone apropriada ao criá -la:

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

Isso é super fácil e é a abordagem que estou usando para o projeto em que estou trabalhando atualmente.

Answer 3

MapIconMaker:uma biblioteca para o Google Maps v2

Uma maneira é usar o MapIconMaker.Há um exemplo aqui.O Google Maps ícones padrão são 20px largura e 34px altura, assim você pode usar algo como isto para emular:

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

Você pode até envolvê-lo em alguma função para tornar as coisas ainda mais fácil em si mesmo:

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

Isso é o que eu uso pessoalmente para todos os marcadores que eu criar.Eu prefiro ter a opção de alterar as cores de um capricho.

Atualização:A cor Hexadecimal do ícone padrão é "#FE7569".Além disso, você pode setImage em um Marcador ao invés de criar um novo Marcador com um novo ícone.Então, se você quer uma função de destaque que você poderia ir com algo como isso, usando a função acima:

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

StyledMarker:uma biblioteca do Google Maps v3

Desde V2 foi substituído por V3 há algum tempo atrás eu pensei que eu deveria atualizar esta resposta.Eu criei uma biblioteca para marcadores personalizados que pode ser encontrado no V3 Biblioteca de utilitários aqui.Ele permite que diferentes cores e formas, e você pode colocar o texto no marcador bem.Ele funciona usando o Google Charts API que tem métodos para a criação de Mapas do Google marcadores tipo.Sinta-se livre para olhar o código-fonte se você preferir usar o Google Charts API diretamente.

A coisa sobre a biblioteca, no entanto, é que ele cuida de definir as regiões clicáveis destes marcador de imagens para você, então, por exemplo, o maior balão com texto, será o clicável regiões, espera-se, como este exemplo.

Answer 4

Design material

Editado em março de 2019 agora com cor de pino programática,

JavaScript puro, sem imagens, suporta rótulos

não depende mais da API de gráficos depreciada

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

Answer 5

Pessoalmente, acho que os ícones gerados pela API do Google Gráficos parecem ótimos e são fáceis de personalizar dinamicamente.

Veja minha resposta em Google Maps API 3 - Marcador de marcador personalizado para marcador padrão (DOT)

Answer 6

A maneira mais simples que encontrei é usar o bitmapDescriptorFactory.DefaultMarker () o documentação até tem um exemplo de definir a cor. Do meu próprio código:

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

Answer 7

Para personalizar marcadores, você pode fazer isso nesta ferramenta on -line: https://materialdesignicons.com/

No seu caso, você quer o mapa-marcador que está disponível aqui: https://materialdesignicons.com/icon/map-marker e que você pode personalizar online.

Se você simplesmente deseja alterar a cor vermelha padrão para azul, pode carregar este ícone: http://maps.google.com/mapfiles/ms/icons/blue-dot.png

Foi mencionado neste tópico: https://stackoverflow.com/a/32651327/6381715