1
I’m developing a map with multiple markers, I need that when the customer clicks a marker the marker icon changes to another icon, I can even do that, but the problem is that I can’t get the icon back to the way it was before when the customer clicks the marker again.
follows the example of how I set up my map:
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);
});
}
}
}
I have spent considerable time researching about this problem but still could not find a solution.