One current project for North West Business Intelligence is a Google Maps application with a great deal of interactive database driven ajax goodness. Spent a while developing the database layer trying to avoid getting caught up in the interface even though, in this case, that's the really interesting bit.
Finally got around to a little bit of interface just to test the back-end you understand and came across a pair of very strange problems. Everything was working fine except for adding markers to the map by clicking. Most of the code for that element was written a couple of years ago and had been rock solid.
The problems were...
1) Clicks on the map seemed to result in semi-random positioning of the corresponding markers
and
2) Half the map was masked by a grey box, when you panned around the map, this grey area changed in height but was always there.
On to the solutions which I'd imagine is how you found this page.
Solution 1
Google Maps isn't compatible with IE8, or maybe Internet Explorer 8 isn't compatible with Google Maps, I haven't the willpower to find out. The solution was simple, force IE8 into IE7 mode. Insert the following meta tag and all was well
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Solution 2
A strange one, and for those more devoted to hardcore web development maybe obvious but this particular map page was an HTML form. Without thinking I'd wrapped the form element around pretty much the whole page. As soon as I took the map div container outside the form element, it all worked again.
Hopefully this article will help and prevent someone from wasting a day like I did!
