Trigger event (image fadein) for external div on polygon mouseover with Google Maps API V3

Question

Been looking a while for a solution and not sure exactly how to execute this... I'm trying to have a polygon trigger an event outside of the map area. Basically what I'm trying to figure out is how to have an image in some div fade in when the polygon is on mouseover, and fade out when at mouseout.

I tried looking at this for help but not sure exactly how to make it work that way. http://gmaps-samples-v3.googlecode.com/svn/trunk/map_events/map_events.html

Answer 1

Without jQuery, I don't think I could have helped you. See this page:

http://jsfiddle.net/CUfZS/3/

In the javascript:

google.maps.event.addListener(polygon, 'mouseover', function(event) {
          $("#myImage").fadeIn("slow");
});

In the body:

<img id="myImage" src="https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000" />

The image starts hidden:

 #myImage {display: none}