Question

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/mapfiles/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?

Answer 1

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>