Проблема с функцией маркера карты Google для различных внешних ссылок

Question

Я использую карту Google для своего сайта. Я хотел бы показать разные цвета при нажатии в правом меню карты. Каждая ссылка имеет свой собственный цвет маркера. Если вы нажимаете на первую ссылку, маркер должен быть зеленым, если вы нажимаете на второй цвет, он должен быть красным и продолжать. Но в коде я пишу после нажатия на каждую из этих ссылок, маркер получает красный цвет, который является последним цветом, который я назначаю. Я думаю, что маркер, функция «щелкнуть» должна быть отдельной функцией для каждой ссылки. Я перепробовал много примеров, но не смог заставить его работать.

Вот фотография:

Вот 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">سلامت بارتی</a></li>
                <li><a class="chargemap" id="chargemap">شارژ باتری</a></li>
                <li><a class="saturationmap" id="saturationmap">شدت روشنایی</a></li>
              </ul>
            </div>
        </div>
        <div id="map-canvas"></div>     
</div>

JS коды:

var gmarkers = [];
var pmarkers = [];
var rmarkers = [];

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


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


    marker.addListener('click', function(r) {
      this.setIcon({
        url: "http://maps.google.com/mapfiles/ms/icons/red-dot.png"
      })
    })
    rmarkers.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");
  }
});

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

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

Может ли кто-нибудь помочь мне с этой проблемой? Я думаю, что это происходит из-за разной click функции и разных marker.addListener('click'), но я не могу решить эту проблему.

здесь - это ссылка js fiddle.

Answer 1

Чтобы изменить все маркеры и иметь разные цвета, измените значок во внешних функциях onclick.

$('.healthmap').click(function() {
  for (var i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setIcon({
      url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png"
    });
  }
});

$('.chargemap').click(function() {
  for (var i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setIcon({
      url: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
    });
  }
});

$('.saturationmap').click(function() {
  for (var i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setIcon({
      url: "http://maps.google.com/mapfiles/ms/icons/red-dot.png"
    })
  }
});

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

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

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 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"
      }
    });
    gmarkers.push(marker);
  }
}

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

$('.healthmap').click(function() {
  for (var i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setIcon({
      url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png"
    });
  }
});

$('.chargemap').click(function() {
  for (var i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setIcon({
      url: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
    });
  }
});

$('.saturationmap').click(function() {
  for (var i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setIcon({
      url: "http://maps.google.com/mapfiles/ms/icons/red-dot.png"
    })
  }
});

#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">سلامت بارتی(make green)</a></li>
        <li><a class="chargemap" id="chargemap">شارژ باتری(make blue)</a></li>
        <li><a class="saturationmap" id="saturationmap">شدت روشنایی(make red)</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>