Cheizer
@Cheizer

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

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

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');
                    })
             
      });


 }
  • Вопрос задан
  • 770 просмотров
Решения вопроса 1
0xD34F
@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);
  });
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы