Изменить значок маркера карты Google, когда пользователь нажимает на какую-либо ссылку

Question

Я использую карту Google, и мне нужно изменить значок маркера в зависимости от некоторых условий. Я добавляю боковую панель в правой части карты, которая объясняет различие условий. Я совершенно новичок в API Google Map и JS, поэтому я немного перепутал.

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

здесьмой код HTML:

<div class="col-sm-12 col-xs-12 map-site">
    <span>نقشه لامپ های پارک ملت</span>
    <div class="sidemap col-sm-3 col-xs-3">
        <button type="button" class="navbar-toggle1 try-op" > 
          <span class="icon-bar top-m"></span> 
          <span class="icon-bar mid-m"></span> 
          <span class="icon-bar bottom-m"></span> 
        </button>
        <div class="menumap"> <!-- <span class="btnClose">×</span> -->
          <ul>
            <li><a class="healthmap" id="healthmap" href="#">سلامت بارتی</a></li>
            <li><a href="#">شارژ باتری</a></li>
            <li><a href="#">شدت روشنایی</a></li>
          </ul>
        </div>
    </div>
    <div id="map-canvas"></div> 
</div>

вот код js:

function initialize() {
    var locations = [
  ['چراغ یک', 36.320153, 59.536075, 4],
  ['چراغ دو', 36.320014, 59.536612, 5],
  ['چراغ سه', 36.319859, 59.537212, 3],
  ['چراغ چهار', 36.320066, 59.538091, 2],
  ['چراغ پنج', 36.319513, 59.536440, 1]
];

  var mapOptions = {
    zoom: 17,
    center:  new google.maps.LatLng(36.320020, 59.537801),
    mapTypeId: 'satellite'
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'),
                                mapOptions);
for (i = 0; i < locations.length; i++) { 
  var image = 'image/marker.png';
  var myLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
  var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: {                             
        url: "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"                           }
    });
}

}

google.maps.event.addDomListener(window, 'load', initialize);

$('.healthmap').click(function() {  
    google.maps.event.trigger(gmarkers[i], "click");
});

Я уже пробую этот ответ , но он не работает для меня! Есть ли способ, как я могу решить эту проблему.

Answer 1

1. создать массив для хранения google.maps.Marker объектов:

var gmarkers = [];

заполните этот массив созданными вами маркерами:

var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: {
    url: "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"
  }
});
gmarkers.push(marker);

добавить прослушиватель события щелчка к маркеру, чтобы изменить его значок:

marker.addListener('click', function(e) {
  this.setIcon({
    url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png"
  })
});

добавить код для обработки через массив маркеров, щелкая по ним в функции прослушивателя щелчков jQuery:

$('.healthmap').click(function() {
  for (var i = 0; i < gmarkers.length; i++) {
    google.maps.event.trigger(gmarkers[i], "click");
  }
});

подтверждение концепции понятия

фрагмент кода:

var gmarkers = [];

function initialize() {
  var locations = [
    ['چراغ یک', 36.320153, 59.536075, 4],
    ['چراغ دو', 36.320014, 59.536612, 5],
    ['چراغ سه', 36.319859, 59.537212, 3],
    ['چراغ چهار', 36.320066, 59.538091, 2],
    ['چراغ پنج', 36.319513, 59.536440, 1]
  ];

  var mapOptions = {
    zoom: 17,
    center: new google.maps.LatLng(36.320020, 59.537801),
    mapTypeId: 'satellite'
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
  for (i = 0; i < locations.length; i++) {
    var image = 'image/marker.png';
    var myLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: {
        url: "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"
      }
    });
    marker.addListener('click', function(e) {
      this.setIcon({
        url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png"
      })
    })
    gmarkers.push(marker);
  }

}

google.maps.event.addDomListener(window, 'load', initialize);

$('.healthmap').click(function() {
  for (var i = 0; i < gmarkers.length; i++) {
    google.maps.event.trigger(gmarkers[i], "click");
  }
});

#map-canvas {
  height: 60%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-12 col-xs-12 map-site" style="height:100%; width: 100%;">
  <span>نقشه لامپ های پارک ملت</span>
  <div class="sidemap col-sm-3 col-xs-3">
    <button type="button" class="navbar-toggle1 try-op">
      <span class="icon-bar top-m"></span>
      <span class="icon-bar mid-m"></span>
      <span class="icon-bar bottom-m"></span>
    </button>
    <div class="menumap">
      <!-- <span class="btnClose">×</span> -->
      <ul>
        <li><a class="healthmap" id="healthmap" href="#">سلامت بارتی (make green)</a></li>
        <li><a href="#">شارژ باتری</a></li>
        <li><a href="#">شدت روشنایی</a></li>
      </ul>
    </div>
  </div>
  <div id="map-canvas"></div>
</div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

Answer 2

как это

function changeMarkerImage(string pIcon){
 var Icon = {
        url: pIcon // marker Image URL
 };

    return new google.maps.Marker({
       icon: Icon
    });
}