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!
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:
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:
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:
It was coming out like this:
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.