On Making Google Maps Work in IE 7

I recently spent some time last week integrating google maps into an online booking application that we are building for a client. It was my first time dealing with the Google API, and I am extremely impressed with the ease and relative cleanliness of the interface!

My main machine is a Mac, and the bulk of the programming I do is in Windows for various reasons. In order to facilitate this, I use Parallels as my Windows VM. However, for web development, there is almost no reason to be in Windows (which is one reason I enjoy it so much). I simply fire up Coda and I’m off!

Enter IE.

Yuck.

Over the weekend, I finished a test version of the site and fired off an e-mail to my boss and our client, telling them that the work was ready for review. On Monday morning, I got word that the site wasn’t working. I opened up Safari and Firefox and everything seemed to work fine. That’s when I realized I forgot to test the site in IE.

Sure enough, when I tried the site, I got the following error message:

Google Maps IE error: “A Runtime Error has occurred. Line:37.”

IE_error_gmaps.jpg

Of course, I did not get this error in IE until I enabled script debugging in the Internet Options->Advanced tab.

After doing some snooping around the Google Maps Group, I discovered that IE7, for whatever reason, did not like the version of the API. So, I changed this:

script src=”http://maps.google.com/maps?file=api&v=2&amp

to this:

script src=”http://maps.google.com/maps?file=api&v=2.50a&amp

And the error magically went away.

One problem solved. According to Google’s documentation, the “v=2” is supposed to default to the latest version of the API. However, for whatever reason, that latest version doesn’t seem to work properly with IE (works fine with Firefox and Safari, though).

One problem down.

The next problem I had was the appearance of the map in general. Instead of looking like this:

The correct map view.

Goodmap.jpg

It was coming out like this:

The IE7 map view.

Badmap.jpg

What I discovered was that the div container ID I was using for the map (simply “map”) was also the anchor link name I was using. Apparently, while Firefox and Safari can tell the difference between a link name and a div name, IE can’t. IE was, as far as I could tell, trying to fit the map into an anchor since the anchor came first (not sure I get the logic on that one).

All I had to do was change the anchor name and everything began to work as advertised.

Advertisements

About johnnywey

Welcome to A Regular Expression. This blog is designed to reflect my thoughts on life, music, software design, Apple, faith, philosophy, and whatever else I can think of.

Posted on October 23, 2007, in AJAX, Programming. Bookmark the permalink. 16 Comments.

  1. Now! First question, where are you going where you have NO idea where its at and its worth this much trouble? remember the good ole days when you would CALL and ask the person on the other line “how do I get there?” or get a map of the city or whatever. I know what I use is great, its called Mapquest.

  2. Gotta love IE!

    I wish Microsoft would just quit making it….

  3. I second that! Although, I hear “IE 8” supposedly passes ACID 2 … we’ll see, I guess!

  4. Hopefully so! We shall see….

  5. I’m not sure if I understood your problem…I liked the arrows. =)

  6. Thanks! This helped me out a lot!

  7. This not work for me. :/

  8. Thanks — the version trick fixed an issue where IE7 couldn’t click and see details on my custom icons. Much appreciated.

  9. Thanks–this saved me tons of searching and debugging!

  10. Great now my ie7 errors are gone, but ie7 isnt displaying the map images! AAARRRRRRRRRG

  11. thanx! had the exact 2 same problems and they both vanished, ur solution worked like a charm. Up for ie6 debugging now :(

  12. Great blog! thanks for the post, solved my problem!

    I had my div named id=”map” as well. Changing the name to something else resolved the issue.

    Thanks again~!!

  13. Thank you very much. It’s useful tip.

  14. Ok ,very good. Thank Johnny

  15. Adding my voice to the thanks: this saved a lot of hair-tearing.

  16. From what I’ve seen these problems don’t affect ie8. But still, give it up Microsoft!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: