There are multiple Google Maps Markers colors based on certain conditions being TRUE or not.
In addition, these Markers will change color when the mouse hovers over a division (a1,a2..ax).
I want the Markers to revert back to their original color when the mouse leaves the division.
Would it work if I save the Marker's color state before using marker.setIcon, and then recall this color on mouseleave?
Thank you for your assistance.
The code below is functioning properly except that every marker turns blue after mouseleave.
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(<?= json_encode($lat); ?>, <?= json_encode($lng);?>),
zoom: <?php echo json_encode($zoom); ?>,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl(<?= json_encode($url); ?>, function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var cf = markers[i].getAttribute("cf");
var wh = markers[i].getAttribute("wh");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var image1 = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
var image2 = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
var marker = new google.maps.Marker({
map: map,
position: point
});
if (cf == "true")
{
marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_blue.png');
}
else if (wh == "true")
{
marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_green.png');
}
else
{
marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_red.png');
}
hover(marker,i);
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function hover(marker, i){
document.getElementById('a'+i).onmouseover = function() {
marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_orange.png');
}
document.getElementById('a'+i).onmouseleave = function() {
marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_blue.png');
}
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}