Como posso alterar a cor de um marcador do Google Maps?

167

Estou usando a API do Google Maps para criar um mapa cheio de marcadores, mas quero que um marcador se destaque dos outros. A coisa mais simples a fazer, acho, seria alterar a cor do marcador para azul, em vez de vermelho. Isso é algo simples de fazer ou eu tenho que criar um ícone totalmente novo de alguma forma? Se eu tiver que criar um novo ícone, qual é a maneira mais fácil de fazer isso?

abeger
fonte
2
Você pode querer verificar esta publicação de ontem: stackoverflow.com/questions/2467720/…
Daniel Vassallo
ou talvez um post melhor stackoverflow.com/questions/7095574/…
Faizan

Respostas:

45

Como o Maps v2 foi descontinuado, você provavelmente está interessado nos mapas da 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ógica para fazer todos os pinos 'regulares' e outro para os pinos 'especiais' usando o novo marcador definido.

Kevin
fonte
24
Nota para futuros leitores: isso é para a API do Google Maps v2, que está obsoleta. Se você estiver usando a v3, precisará procurar em outro lugar.
priestc
12
Cliquei no primeiro link, ctrl-f para 'cor': sem resultados. Seria ótimo adicionar mais detalhes à resposta para realmente responder à pergunta. O OP pergunta especificamente se é possível alterar a cor sem criar um novo ícone.
qwertzguy
125

Com a versão 3 da API do Google Maps, a maneira mais fácil de fazer isso é pegar um conjunto de ícones personalizados, 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 mapa, poderá colorir um Marcador simplesmente usando a opção de ícone apropriada ao criá-lo:

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.

Sean McMains
fonte
6
Essa resposta é incrível. Fiquei triste que a resposta aceita seja para a V2, mas felizmente rolando para baixo valeu a pena. Obrigado!
Adam Tuttle
Eu criei uma versão que não dependem de imagens: stackoverflow.com/a/23163930/1689770
Jonathan
49

MapIconMaker: uma biblioteca para o Google Maps v2

Uma maneira é usar o MapIconMaker (deadlink). Há um exemplo aqui (deadlink). Os ícones padrão do Google Maps têm largura de 20 px e altura de 34 px, portanto, você pode usar algo assim 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 facilitar ainda mais as coisas:

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

É o que eu pessoalmente uso para todos os marcadores criados. Eu prefiro ter a opção de mudar as cores de um capricho.

Atualização: a cor hexadecimal do ícone padrão é "# FE7569". Além disso, você pode definir a imagem em um marcador em vez de criar um novo marcador com um novo ícone. Portanto, se você deseja destacar uma função, pode usar algo parecido com isto, usando a função acima:

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

StyledMarker: uma biblioteca para o Google Maps v3

Desde que a V2 foi substituída pela V3 há algum tempo, pensei em atualizar esta resposta. Criei uma biblioteca para marcadores personalizados que podem ser encontrados na Biblioteca de Utilitários V3 aqui (deadlink). Ele permite cores e formas diferentes, e você também pode inserir texto no marcador. Ele funciona usando a API do Google Charts, que possui métodos para criar marcadores de tipo do Google Maps. Sinta-se à vontade para consultar o código-fonte, se você preferir usar a API do Google Charts diretamente.

A coisa sobre essa biblioteca, no entanto, é que ela cuida de definir as regiões clicáveis ​​dessas imagens de marcadores para você; portanto, por exemplo, o balão mais longo com texto terá as regiões clicáveis ​​que se espera, como neste exemplo (deadlink).

Prumo
fonte
3
Parece que isso é compatível apenas com a API GMaps v2?
Tigraine
7
@Tigraine Na verdade, criei uma biblioteca totalmente nova para usar na v3 chamada "StyledMarker", que pode ser encontrada na Biblioteca de Utilitários da v3: code.google.com/p/google-maps-utility-library-v3/wiki/Libraries
Bob
veja a resposta de Sean McMains para a v3
smp7d
@ Matt Originalmente, sim, era apenas a v2. Eu já atualizado para incluir uma solução v3
Bob
Para sua informação, "setImage" não é uma função do mercado na API do Google Maps v3. "setIcon" é a função correta a ser usada.
precisa
39

insira a descrição da imagem aqui insira a descrição da imagem aqui Design material

EDITADO EM MARÇO DE 2019 agora com cor programática dos pinos,

JAVASCRIPT PURO, SEM IMAGENS, ETIQUETAS ETIQUETAS

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

    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
fonte
2
Infelizmente, esse recurso foi descontinuado, como você pode ver aqui . Essa é uma situação tão decepcionante, em que isso foi descontinuado e a versão anterior que eu usei MapIconMakerjá foi descontinuada.
zerowords
Observe que isso não funciona com https, apenas http. Vadio!
JoeGalind
@JoeGalind, existe alguma razão para a criptografia ser necessária ao buscar cores? Quero dizer, não vejo risco de segurança a httpmenos que exponha algo que não conheço no cabeçalho
Jonathan
@ JonathanLeaders: isso significa que você precisa adicionar o domínio à lista de permissões no info.plist do seu projeto, pois não é uma chamada https.
precisa saber é o seguinte
6
Atualizado para 2019, não é mais descontinuado #
Jonathan
12

A maneira mais simples que encontrei é usar o BitmapDescriptorFactory.defaultMarker (), a documentação ainda tem um exemplo de configuração da 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()))
Michael Hamilton
fonte
Este é apenas o Android ou também para navegadores da Web?
19619 Jonathan
@ Jonathan - isto é só para android - o exemplo que ele postou está em JAVA
dazza5000
2

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

No seu caso, você deseja o marcador de mapa disponível aqui: https://materialdesignicons.com/icon/map-marker e que você pode personalizar on-line.

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

GuGuss
fonte
0

Este artigo relativamente recente fornece um exemplo simples com um conjunto limitado de ícones coloridos do Google Maps.

Tronco
fonte