javascript - Google Maps API: update Marker color

Question

I have several Google Maps Markers colors depending on whether conditions are TRUE or not.

Additionally these Markers change color when mouse is over a division (a1,a2..ax).

I'd like these Markers to go back to the color set previously when mouse leaves the division.

Would it give something like : 'save Marker state color' before marker.setIcon and then caling back this color on mouseleave?

Thanks for your help.

Here is my code, working fine except that every marker is 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);
}

Answer 1

My suggestion would be to use function closure in a createMarker function to associate the event listeners and properties of the marker with it.

function createMarker(point, cf, wh, html, i, map) {
  var marker = new google.maps.Marker({
    map: map,
    position: point,
    draggable: true

  });
  var activeIcon, idleIcon;
  if (cf == "true") {
    idleIcon = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
  } else if (wh == "true") {
    idleIcon = 'http://labs.google.com/ridefinder/images/mm_20_green.png';
  } else {
    idleIcon = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
  }
  marker.setIcon(idleIcon);

  var elem = document.getElementById('a' + i);
  if (!!elem) {
    elem.onmouseover = function() {
      marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_orange.png');
    }
    elem.onmouseleave = function() {
      marker.setIcon(idleIcon);
    }
  }
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);

  });

  return marker;
}

Call it like this:

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;
    createMarker(point, cf, wh, html, i, map);
  }

proof of concept fiddle