Google Maps API - Dynamically modify bookmarks

Asked

Viewed 59 times

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.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.