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">
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.
ReplyDeleteTo 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
Hello,
ReplyDeleteI 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
Hi Andy,
ReplyDeletecan you post a link to your map so I could take a look?
Cheers,
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.
ReplyDeleteHi Peso,
ReplyDeleteIt'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.
How can i download googlemap images of a city and my site use these images?
ReplyDeleteBest regards.
ReplyDeleteGuilherme, Brazil.
Hi,
ReplyDeletei 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
Very Useful
ReplyDeleteHi,
ReplyDeleteI 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
very interesting article
ReplyDeletehow to put the progress bar while loading the markers in the google map?
ReplyDeleteThank you. Yes the google maps are bez torba great i am now just waiting for more functionality!
ReplyDeleteI'm almost started to use Panoramio, and I can tell you is cool, my brother knew this but I just the other day said to Panoramio, Google and really fast loading images and maps that are set.
ReplyDelete