I have a simple enough map on Google Maps V3.
I change the icon image on mouse over listener event, I change it back on mouse out simple enough.
I change the icon again when I click the marker, but, I want to keep that icon while the marker is selected. When I mouse out, the marker icon changes again because I told it to do so in the mouse out listener event.
I need to exclude the selected marker from the mouseout listener event but I can't figure out how to find the marker I have currently selected. Any ideas?
Here is my code
google.maps.event.addListener(marker, 'mouseover', function () {
this.setIcon("images/star-3-white.png");
});
google.maps.event.addListener(marker, 'mouseout', function () {
// this overwrites the image again,
// need to exclude the current one here
this.setIcon("images/star-3.png");
});
google.maps.event.addListener(marker, 'click', function () {
this.setIcon("images/star-3-white.png");
infowindow.setContent(this.html);
infowindow.open(map, this);
});
A bit long winded but I just added a variable to store the current marker title which I know is unique. I then check to see if it is that one that I am selecting. Also, I make sure to reset all the markers so it doesnt stay the same color as a selected one:
var clickedMarkerTitle = null;
function addMarker(latLng, _title, contentString) {
marker = new google.maps.Marker({
map: map,
position: latLng,
icon: "images/star-3.png",
title: _title,
html: contentString
});
google.maps.event.addListener(marker, 'mouseover', function () {
this.setIcon("images/star-3-white.png");
});
google.maps.event.addListener(marker, 'mouseout', function () {
//this.setIcon("images/star-3.png");
testIcon(this);
});
google.maps.event.addListener(marker, 'click', function () {
resetMarkerIcons();
saveIconState(this);
this.setIcon("images/star-3-white.png");
infowindow.setContent(this.html);
infowindow.open(map, this);
});
markersArray.push(marker);
}
function resetMarkerIcons() {
// reset all the icons back to normal except the one you clicked
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setIcon("images/star-3.png");
}
}
function saveIconState(marker) {
clickedMarkerTitle = marker.title;
}
function testIcon(marker) {
$('#test').html('<span>' + marker.title + '</span>');
if (clickedMarkerTitle != null) {
$('#test').html('<span>' + marker.title + ' and its not null</span>');
if (marker.title != clickedMarkerTitle) {
$('#test').html('<span>' + marker.title + ' and ' + clickedMarkerTitle + '</span>');
marker.setIcon("images/star-3.png");
}
}
else {
marker.setIcon("images/star-3.png");
}
}