google map 标记点击 function 不同外部链接的问题

Question

I am using google map for my website. I would like to show different colors when clicking on the right menu of the map. each link has it's own marker color. If you click on the first link the marker must be green, if you click on the second color it must be red and go on. But in the code, I write after I click on each of these links the marker gets the red color which is the last color I assign. I think that marker, 'click', function should be a different function for each link. I've tried a lot of examples but I couldn't make it work.

Here is the photo:

Here is the HTML codes:

<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 codes:

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

Can any one help me with this problem? I think It occurs because of the different click function and different marker.addListener('click') , But I can't fix this problem.

here is the js fiddle link.

Answer 1

To change all the markers and have different colors, change the icon in the external onclick functions.

$('.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"
    })
  }
});

proof of concept fiddle

code snippet:

 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>