Thursday, July 19, 2007

Google Maps API Weirdness in IE6

For the past few months I've integrating the Google Maps API into an existing website. Last month we finally released the new version of the site and everything seemed to be working fine, except in IE6.

Specifically, the map marker icons (you know, the little red teardrops) were not rendering properly. Here's how they looked in IE7 and Firefox:

and here's how they looked in IE6:

Yuck! Now, it's a well-known fact that IE6 can't render PNG files properly (specifically if they have any transparency to them, which these icons do). However, the Google Maps API is aware of this and employs the AlphaImageLoader filter to compensate. Go to on IE6 and the icons look just fine.

So why were my icons turning out so crumby?

Well, my scenario was a bit more complex than all the standard 'hello world' samples out there. First, I was using custom icons. But on top of that I wasn't simply slapping some static JavaScript code on my page to display the Google Maps API objects. Rather, I was generating all of the JavaScript code dynamically in my .aspx page on the server side. However, the final HTML output of my page (specifically the JavaScript code rendering the GIcon objects) looked right.

Except for one difference. Like I said, I was using custom icons. Just about all of my custom icons were the same shape; they really only differed in color, which meant the only real difference was the GIcon.image property (all the other properties were pretty much identical). In my inifinite wisdome I thought it would be clever to consolidate all of the other image URL properties associated with each GIcon (shadow, transparent, etc) and I would do this by storing those images as embedded resources within my assembly and referencing them via WebResource.axd.

The end result was that instead of the GIcon JavaScript code looking like this:
icon.shadow = "my-shadow.png";
it looked like this:
icon.shadow =
And what was tripping up IE6 was the fact that the image URL wasn't ending in ".png". Really what was being tripped up was the Google Maps API JavaScript code running in IE6. Perhaps the version of their code that runs in IE7 is able to automatically detect PNG files without requiring a .png file extension. Who knows. But the bottom line is that the image URL must end in a .png file extension, ruling out any standard dynamic image URL resource (like WebResource.axd).

This took me a fair amount of effort to solve. Hopefully, I'll save someone else the time.

No comments: