Tuesday, August 30, 2005

Loading Google Map's page with many markers slow in Explorer

As anybody that has visited Panoramio will say to you,
it may take an awful long time to load markers on a Google Maps page.

I didn't know what was going on. I mean, Firefox was much much faster on this page than Internet Explorer, on the same connection, same computer. Why?

A very long thread over this issue was running on the Google Maps API discussion group without any clear work-around or explanation. So I took the plunge.

I fired Fiddler, a wonderful little application done by Eric Lawrence, one Program Managers of Microsoft Internet Explorer 7. Fiddler spies the WinINET calls, and logs all the HTTP requests and responses done and received by your computer using the WinINET library.

The reason Internet Explorer was so much slower than Firefox was obvious, Internet Explorer was querying the browser for the marker image, but it was doing it once for each marker! That means the server was sending out the same image over and over again.

It turns out Explorer may cache the image, but it needs a bit of time to cache it. If you just ask for 500 markers directly, it will try to download 500 times the five images that compose a marker.

Depending on your IE options, and on the headers your server sends along with your images, you may find this bug only the first time you open the page, and then it may vanish, or not, or appear again when the cache expires, to vanish again after that, or remain there (again, in function of your exact headers).

So if you have to read multiple markers in google maps, before doing so make sure Internet Explorer has put the needed images in the cache:

<script type="text/javascript">function onLoad() { ... your code here ... }</script>
<body onload="setTimeout(onLoad, 100)">
<img href="http://www.google.com/mapfiles/marker.png" style="display:none">

<img href="http://www.google.com/mapfiles/shadow50.png" style="display:none">

<img href="http://www.google.com/mapfiles/markerTransparent.png" style="display:none">

<img href="http://www.google.com/mapfiles/markerie.gif" style="display:none">

<img href="http://www.google.com/mapfiles/dithshadow.gif" style="display:none">