My project at work recently required me to switch from using the MapIconMaker library to static custom markers. (Our software is required to work in secure environments that cannot access the Internet.)
I whipped together a bunch of static PNG icons using the MapIconMaker Wizard and modified my dynamic marker code to produce links to the appropriate markers based on which “bin” the values fall into.
Everything was working swimmingly in Firefox. Then I tested my page in IE. No markers showed up at all.
“No problem”, I thought. I know IE has issues with PNG’s. I’ll just convert all my markers to GIF’s.
The GIF’s displayed fine in IE, but they just didn’t look anywhere near as good as the PNG’s, as you can see here. PNG’s handle overlaps and shadows MUCH better than GIF’s due to PNG’s superior transparency support.
Unfortunately, it took me well over a day to figure out why my PNG’s weren’t displaying in IE. It turns out you need to use ABSOLUTE paths rather than RELATIVE paths for PNG’s to work with Google Maps. I assume this is because the Google Maps API does some magic with PNG files to get them to display in IE.
I stumbled on this solution by sheer luck – thanks to having turned on debugging on my tomcat server, I noticed a bunch of “invalid path” requests. I probably would have noticed these in Firebug, if IE had a similar plugin available.
Anyway, I hope this post helps someone avoid the pain I went through on this.