Try to search your question here, if you can't find : Ask Any Question Now ?

google map marker click function problem for diffrente external links

HomeCategory: stackoverflowgoogle map marker click function problem for diffrente external links
Avatarjulie asked 1 week ago

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 didn’t work it.

Here is the photo:
enter image description here

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’s occure becuse of the diffrente click function and diffrente marker.addListener('click'), But I cant fix this problem.

1 Answers
Best Answer
AvatarMikhail answered 1 week ago
Your Answer

14 + 16 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com