Panoramio's Blog

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

August 30th, 2005 by Joaquín Cuenca Abela

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”>

Filed under: html, javascript   |  

13 Responses to “Loading Google Map’s page with many markers slow in Explorer”  

Feed for this Entry
  1. 1 philip on Aug 31st, 2005 said:

    There is another aspect to this problem — which is that the maps implementation loads all the images (and shadows) for markerss as soon as you add them to be displayed. In my application, I had a different marker for 50 different locations, and my server was being hammered — even though all the markers except one were (typically) off the edge of the screen.

    To combat this, I built a LazyMarker class that behaves very like the GMarker, but only loads the images when the marker is likely to be displayed. Essentially the LazyMarker object spots when it is about to be moved within a short distance of the displayed area, and then replaces itself with a regular GMarker.

    You can find the class at http://weather.gladstonefamily.net/LazyMarker.js

    YMMV

  2. 2 Andy Gordon on Nov 24th, 2006 said:

    Hello,

    I know this is an old subject but i have a similar but different problem.

    i am using addOverlay on the to centre a marker on the page as part of a GEvent.addListener(mymap, ‘move’, moveAction);

    the problem i get is that IE make the whole map very clucky as it is moved.

    I have tried you solution of preloading the graphics but it dosent have any effect.

    Do you have any other ideas

    Many thanks Andy

  3. 3 Joaquín Cuenca Abela on Nov 24th, 2006 said:

    Hi Andy,

    can you post a link to your map so I could take a look?

    Cheers,

  4. 4 Peso on Jan 25th, 2007 said:

    Why do you have onload=”setTimeout(onLoad, 100)”? Is that to make sure IE caches the images before running onLoad()? If that’s the case wouldn’t it suffice to have setTimeout(onLoad, 0)? That way it waits 0 milliseconds after the whole page is loaded, and you don’t have to wait an extra 100ms.

  5. 5 Joaquín Cuenca Abela on Jan 25th, 2007 said:

    Hi Peso,

    It’s not a matter of running after the page load, you actually have to load a few milliseconds later as IE is saving the images asynchronously.

    If you use 100ms you let IE (probably) enough time to save the images, the less time you allow, the smaller the possibility of IE saving/caching the image.

  6. 6 Guilherme on Mar 28th, 2007 said:

    How can i download googlemap images of a city and my site use these images?

  7. 7 Guilherme on Mar 28th, 2007 said:

    Best regards.

    Guilherme, Brazil.

  8. 8 picknicker6 on Apr 3rd, 2007 said:

    Hi,

    i am using Joomla and implemented Google Maps - it works as always perfectly fine with Firefox but IE rejects to display the markers - maybe someone will read this and has an idea.

    Greetz
    pick

  9. 9 piaoma on May 7th, 2007 said:

  10. 10 nestor on Dec 12th, 2007 said:

    Very Useful

  11. 11 pascal on Jan 10th, 2008 said:

    Hi,

    I face the same pb as picknicker6.
    My application runs well with Firefox and Opera but Markers provided by xml through PHP/MySQL request are not visualised with IE…
    Thanks, Pascal

  12. 12 nestor on Apr 5th, 2008 said:

    very interesting article

  13. 13 Sim on Apr 29th, 2008 said:

    how to put the progress bar while loading the markers in the google map?

Leave a Reply


For spam detection purposes, please copy the number 1377 to the field below:

RSS