2

Такой у меня код гугл:

function initMap() {
  var firstMarker = {lat: 50.461686, lng:  30.496442};
  var secondMarker = {lat: 50.430365, lng:  30.520543};
  var thirdMarker = {lat: 50.452029, lng:  30.486235};

  // Create a map object and specify the DOM element for display.
  var locations = [
    ['Bondi Beach', firstMarker, 4],
    ['Coogee Beach', secondMarker, 5],
    ['Cronulla Beach', thirdMarker, 3],
  ];

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: new google.maps.LatLng(50.451756, 30.509776),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infowindow = new google.maps.InfoWindow();

  var marker, i;

  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      icon: '/html/img/map_marker.png',
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {

      // console.log(i)
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
        console.log(marker);
        if(marker.icon == '/html/img/map_marker.png') {
          marker.setIcon('/html/img/marker_active.png');

        }
        else {
          marker.setIcon('/html/img/map_marker.png');
        }
      }
    })(marker, i));
  }
}

Так выглядит это чудо : клик Так при клике на элемент : клак

Мне нужно, что бы при клике на маркер он менялся на красный (как на втором скрине), а все остальные менялись на синий Сейчас реализована только первая часть, но я не могу понять, как менять картинку остальным маркерам на синий.

Задача: при клике на маркер давать ЭТОМУ маркеру красную картинку, а остальным двум синюю.

Спасибо

1 ответ 1

2

При клике нужно пройтись по всем маркерам, меняя им цвет на базовый, а кликнутому установить другой.

DEMO

// Create the locations array
var locations = [
  ['Bondi Beach', 50.461686, 30.496442, 4],
  ['Coogee Beach', 50.430365, 30.520543, 5],
  ['Cronulla Beach', 50.452029, 30.486235, 3],
];

var markers = [];

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: new google.maps.LatLng(50.451756, 30.509776),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infowindow = new google.maps.InfoWindow();
  var marker, i;

  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|0000CC',
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {

      // console.log(i)
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
        console.log(marker);

        //marker.setIcon('http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|CC0000');

        for (var j = 0; j < markers.length; j++) {
            markers[j].setIcon('http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|0000CC');
        }

                marker.setIcon('http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|CC0000');
      }
    })(marker, i));

    markers.push(marker);
  }
}
0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.