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

Estou usando a API do Google Maps para criar um mapa cheio de marcadores, mas quero que um marcador se destaque dos demais. A coisa mais simples a fazer, penso eu, seria mudar a cor do marcador para azul, em vez de vermelho. Isso é uma coisa simples para 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?

Como o Google Maps v2 está obsoleto, provavelmente você 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 que faz os pinos ‘especiais’ usando o novo marcador definido.

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

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

Se você colocar todos esses icons no mesmo lugar 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 no qual estou trabalhando atualmente.

MapIconMaker: uma biblioteca para o Google Maps v2

Uma maneira é usar o MapIconMaker . Há um exemplo aqui . Os icons padrão do Google Maps têm 20 px de largura e 34 px de altura, pelo que pode utilizar 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é mesmo envolvê-lo em alguma function para tornar as coisas ainda mais fáceis para você:

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

Isso é o que eu pessoalmente uso para todos os marcadores que eu crio. Eu prefiro ter a opção de mudar as colors de um capricho.

Atualização: a cor Hex do ícone padrão é “# FE7569”. Além disso, você pode setImage em um marcador, em vez de criar um novo marcador com um novo ícone. Então, se você quiser uma function para destacar, você poderia ir com algo assim, usando a function 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 V2 foi substituído por V3 há algum tempo atrás eu pensei que deveria atualizar esta resposta. Eu criei uma biblioteca para marcadores personalizados que podem ser encontrados na biblioteca de utilitários V3 aqui . Ele permite diferentes colors e formas, e você pode colocar o texto no marcador também. Ele funciona usando a Google Charts API, que tem methods para criar marcadores de tipo do Google Maps. Sinta-se à vontade para analisar o código-fonte, se preferir usar a Google Charts API diretamente.

A coisa sobre essa biblioteca, no entanto, é que ela cuida de definir as regiões clicáveis ​​dessas imagens de marcador para você, portanto, por exemplo, a bolha mais longa com texto terá as regiões clicáveis ​​esperadas, como neste exemplo .

(DEPRECADO) Você não precisa de nenhuma biblioteca personalizada para o 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 Isso funciona a partir de outubro de 2014, mas está obsoleto.

Pessoalmente, acho que os icons gerados pela Google Charts API são ótimos e fáceis de personalizar dinamicamente.

Veja minha resposta na API do Google Maps 3 – Cor do marcador personalizado para o marcador padrão (ponto)

A maneira mais simples que encontrei é usar BitmapDescriptorFactory.defaultMarker (), a documentação tem até 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())) 

Para personalizar os marcadores, você pode fazer isso a partir desta ferramenta online: https://materialdesignicons.com/

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

Se você simplesmente quiser alterar a cor vermelha padrão para Azul, poderá carregar este ícone: http://sofpt.miximages.com/google-maps/blue-dot.png

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