Google Maps Api V3 - noticeable flicker when changing MarkerImage's URL

I would like to change the marker image on a mouseover event. Right now, the important bit looks like this:

google.maps.event.addListener(marker, "mouseover", function (event) 
{
    this.set('icon', 'http://google.com/mapfiles/ms/micons/yellow-dot.png');
});

google.maps.event.addListener(marker, "mouseout", function (event) 
{
    this.set('icon', 'http://google.com/mapfil开发者_Python百科es/ms/micons/red-dot.png');
});

There is a flicker when I mouse over the first time, which I think is because Maps is loading the new image from the URL.

Is there any way to pre-load both the yellow and red paddle markers and store them in cache?

I'm not sure if this solution will address your specific problem, but try disabling the "optimized" property of the marker:

var marker = new google.maps.Marker({
   position: new google.maps.LatLng(lat, long), 
   icon: markerIcon, 
   optimized: false
});

This fixed a problem for me in IE where hovering a marker at certain zoom levels would produce a flickering effect.

Per Preload marker images for Google Maps, you can try putting the image URL in a <div> tag with CSS display set to none to sort of fool the browser into preloading it.

There may be other ways (HTML5 manifest?) but that would seem to be a quick and simple solution to try. (If it doesn't work, it didn't take much effort to do and undo. If you try it, I'd love to know if it works or doesn't work for you.)

In your case, you could do a quick-and-dirty test for it by including this on your page:

<div style="display:none">
    <img alt="" src="http://google.com/mapfiles/ms/micons/yellow-dot.png"/>
</div>