Как в Google Maps изменить маркер по клику на него?

Question

[Cheizer]

Как поменять рисунок маркера по клику на нем?

Google карта на сайте, есть маркеры свои, и по клику на маркере научился изменять его рисунок, делаю это через
setIcon();, но вот засада, когда я кликаю по следующему маркеру, предыдущий остается активным, так как я уже по нему кликнул и изменил иконку, как бы сбрасывать setIcon();, чтобы для маркеров всех кроме активного, установки были по умолчанию?

function initialize() {  
            var myLatLng = {lat: 55.6978, lng: 37.8592};

             var locations = [
          {
            position: {lat: 55.6978, lng: 37.8592},
            icon: {
              url: "/images/icon/pinMap.png",
              scaledSize: new google.maps.Size(69, 69)
            }
          }					
        ];
     var myMapOptions = {
.....
  };
   var map = new google.maps.Map(document.getElementById("map"), myMapOptions); 

        //marker 
                locations.forEach(function(o, n) {
                    var i = new google.maps.Marker({
                            position: o.position,
                            map: map,
                            icon: o.icon
                        }),
                    i.addListener("click", function() {
                    i.setIcon('/images/icon/pinMap2.png');
                    })
             
      });


 }

Answer 1

[0xD34F]

const locations = [
  { latlng: [55.692222,37.532778] },
  { latlng: [55.743889,37.4975] },
  { latlng: [55.793611,37.5875] },
  { latlng: [55.73852,37.61734] },
  { latlng: [55.7408,37.7469] },
];

const iconDefault = 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/32/Map-Marker-Marker-Outside-Pink-icon.png';
const iconActive = 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/32/Map-Marker-Marker-Outside-Chartreuse-icon.png';

function onClick() {
  locations.forEach(n => n.marker.setIcon(n.marker !== this ? iconDefault : iconActive));
}

google.maps.event.addDomListener(window, 'load', function() {
  const map = new google.maps.Map(document.querySelector('#map'), {
    zoom: 11,
    center: new google.maps.LatLng(55.74, 37.58),
  });

  locations.forEach(n => {
    n.marker = new google.maps.Marker({
      position: new google.maps.LatLng(...n.latlng),
      map: map,
      icon: iconDefault
    });
    n.marker.addListener('click', onClick);
  });
});

Comments

[Cheizer]

Спасибо за ответ, сделал как у вас, но не работает :(

function initialize() {  
            var myLatLng = {lat: 55.6978, lng: 37.8592};

var iconDefault = '/images/icon/pinMap.png',
    iconActive = '/images/icon/pinMap2.png';

             var locations = [
          {
            position: {lat: 55.6978, lng: 37.8592},
            icon: {
              url: iconDefault,
            }
          }					
        ];
     var myMapOptions = {
.....
  };
   var map = new google.maps.Map(document.getElementById("map"), myMapOptions); 

        //marker 
                locations.forEach(function(o, n) {
                    var i = new google.maps.Marker({
                            position: o.position,
                            map: map,
                            icon: iconDefault
                        }),
                    i.addListener("click", function() {
                    i.setIcon( i !== this ? iconDefault : iconActive );
                    })
      });
 }

[0xD34F]

Роман Кузнецов,

сделал как у вас

Нет, не сделали.

[Cheizer]

0xD34F, я не могу изменить полностью как у вас функцию location, у меня там много кода, я сюда просто упростил, все полетит в трубу, там еще и infoWindow и тд. А у вас переменные уже другие такие как n вместо i

[Cheizer]

И у меня сразу не работает если VAR iconDefault не помещать в initialize, а у вас вынесено за функцию

[Cheizer]

Вот как у меня все устроено https://codepen.io/Cheizer/pen/wxMqLz

[0xD34F]

Роман Кузнецов,

Вот как у меня все устроено https://codepen.io/Cheizer/pen/wxMqLz

замените

i.addListener("click", function() {
  p.open(map, i)
  i.setIcon(i !== this ? iconDefault : iconActive);    
})

на

o.marker = i;
i.addListener("click", function() {
  p.open(map, i)
  locations.forEach(l => l.marker.setIcon(l.marker === this ? iconActive : iconDefault));
})

[Cheizer]

0xD34F, :))))))) заработала!!! БЛАГОДАРЮ!!! Я только вникаю в это все :) Спасибо большое!!!