Google Maps API V3 and Internet Explorer

Question

I'm creating a site with wordpress inside a page that uses the Google API.

The map works with all browsers (Firefox, Chrome, Safari, Opera) except IE.

The page with the map is this

http://www.guicciardinistrozzi.it/tenute

A strange thing happens if I copy the source of the page I linked and copy it into a html file, IE can display the map.

We proved http://www.guicciardinistrozzi.it/tenute_/index.html

I tried to change the permalink structure with that of wordpress strandard with no results.

The script in javascript that I used are as follows:

• inizializza.js

• luoghi.js

The CSS code for the map is luoghi.css

Answer 1

Can you try with this addition in your header ?

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Answer 2

Your script insertion isn't happening in IE. In particular, this line has no effect:

window.onload = loadScript;

If you manually execute the loadScript event, the map displays. Something IE specific is probably overwritting the onload event.

Check out $(document).ready equivalent without jQuery for a better method to add a listener to the onload event.

Answer 3

Thank you! The problem was the window.onload event. I've solved this problem adding this code to my inizializza.js file.

function loadScript() {

 var script = document.createElement("script");
 script.type = "text/javascript";
 script.src ="http://maps.googleapis.com/maps/api/js?key=****&sensor=false&callback=initialize";
 document.body.appendChild(script);
 }
 window.onload = loadScript;

// IE (the code I've added)

 document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
 var script = document.getElementById("__ie_onload");
 script.onreadystatechange = function() {
     if (this.readyState == "complete") {
         loadScript(); // call the onload handler
     }
 };