Recently I have been working again with Google Maps on a site for work. I was working with implementing transparent polygons, which were displaying perfectly with Firefox 2. Figuring that Firefox, Javascript, and I don’t get along very well at times, IE would work fine if Firefox worked. I was wrong.
After finishing the map page and confirming everything worked perfect in Firefox, I switched over to IE7 and gave it a run. The first time the page loaded only half of the polygon overlays were being displayed. Every time I would refresh the content, the behavior of the overlays would change. It was completely unpredictable if they would display or not.
Again I confirmed within Firefox’s Javascript Error Console that there were no errors detected. IE7 didn’t display any errors either. I realized that the issue lied with Google’s addOverlay function, but I couldn’t figure out why it would work in one browser but not another.
I attempted to perform some try/catch and setTimeout blocks for the function, thinking that IE7 wasn’t taking the time to run the script correctly. This didn’t work out, so I turned to the all-knowing Google.
Found a site that spoke about checking the DOCTYPE, making sure it was set to XHTML 1.0 Strict. Sure enough the DOCTYPE was HTML 4.01 Traditional. Replacing it with the following fixed the issue:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:v=”urn:schemas-microsoft-com:vml”>
And if you’re interested in seeing it work correctly, check out http://www.midlandwifi.com/locations.php
0 Comments