Estou desenvolvendo um mapa com vários marcadores, eu preciso que quando o cliente clique em um marcador o ícone do marcador mude para outro ícone, eu até consigo fazer isso, mas o problema é que não consigo fazer o ícone voltar a ser o que era antes quando o cliente clicar novamente no marcador.
segue o exemplo de como montei meu mapa:
function initMap(){
// Opções de mapa
var options = {
zoom:12,
center:{lat:-12.254825,lng:-38.960731},
mapTypeId: 'hybrid'
};
// Novo mapa
var map = new google.maps.Map(document.getElementById('map'), options);
// Array com os marcadores
var markers = [
{coords:{lat: -12.253767,lng: -38.973264},
iconImage:'img_tag/marcador_vermelho.png',
content:"<p>Conteúdo da caixa de informações.</p>"},
{coords:{lat: -12.263916,lng: -38.959316},
iconImage:'img_tag/marcador_vermelho.png',
content:"<p>Conteúdo da caixa de informações.</p>"}
];
// Loop através dos marcadores
for(var i = 0;i < markers.length;i++){
// Adicionar marcador ao mapa
addMarker(markers[i]);
}
// Adicionar função de marcador
function addMarker(props){
var marker = new google.maps.Marker({
position:props.coords,
map:map,
ícone: props.iconImage
});
// Verifique se há customicon
if(props.iconImage){
// Definir imagem do ícone
marker.setIcon(props.iconImage);
}
// Verifique o conteúdo
if(props.content){
var infoWindow = new google.maps.InfoWindow({
content:props.content,
});
marker.addListener('click', function(){
marker.setIcon('img_tag/marcador_preto.png');
infoWindow.open(map, marker);
});
}
}
}
Tenho dedicado um tempo considerável pesquisando sobre esse problema mas ainda não consegui encontrar uma solução.