google map marker click function problem for diffrente external links

M

mkafiyan

Guest
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 the 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 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[1], locations[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, "click");
}
});

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

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


can any one help me with this problem?

Continue reading...
 
Top