Javascript markers handling events

Question

Hi i have created some code where the user selects the location the number and the color of a marker and then the marker that he has selected is added on the map. Is there any possible way of adding an event listener lets say mouse over so when you get the mouse over the marker that he added it changes lets say color or type. Here is my code:

function dropmarker()
   {
var lat = prompt ('Latitude'); var lng = prompt('Longitude');
var mark = document.getElementById('mark').value;
var style = document.getElementById('number').value;

switch(mark + ' ' + style)
{
  case 'blue one':
      new google.maps.Marker({
            position: new google.maps.LatLng(lat,lng),
            map:map,
            icon:'blue1.png'
        });
    break;
case 'blue two':
      new google.maps.Marker({
            position: new google.maps.LatLng(lat,lng),
            map:map,
            icon:'blue2.png'
        });

mark1 = new google.maps.MarkerImage('custom1.png',
new google.maps.Size(32,37),
new google.maps.Point(0,0),
new google.maps.Point(16,35));


}
google.maps.event.addListener(marker, 'mouseover', function() 
{
 marker.setIcon(mark1);
});

}

 google.maps.event.addDomListener(window,'load',initialize);

How can i add some code so when i put the mouse over the marker it changes color ?

Answer 1

You're going to need to create the marker, and then place the listener on the created marker. e.g.

var theMarker;
var icon2 = "imageB.png";
var originalIcon;
switch(mark + ' ' + style)
{
     case 'blue one':
           theMarker = new google.maps.Marker({
                      position: new google.maps.LatLng(lat,lng),
                      map:map,
                     icon:'blue1.png'
                    });
           originalIcon = 'blue1.png';
    break;
    case 'blue two':
          theMarker = new google.maps.Marker({
                     position: new google.maps.LatLng(lat,lng),
                     map:map,
                     icon:'blue2.png'
                     });
          originalIcon = 'blue2.png';
}

google.maps.event.addListener(theMarker, 'mouseover', function() 
{
    theMarker.setIcon(icon2);
});
google.maps.event.addListener(theMarker, 'mouseout', function() 
{
    theMarker.setIcon(originalIcon ); 
});

Answer 2

Have you tried CSS? Something along these lines:

#mark:hover { color: red}

Answer 3

ok, then maybe something like this:

google.maps.event.addListener(marker, 'mouseover', function() 
{
     marker.setIcon(icon2);
});