Google Maps: Simple app not working on IE

Question

We have a simple Google Maps traffic application up at: http://www.avonandsomerset.police.uk/newsroom/traffic/

For some reason it's recently stopped working in IE correctly. At this point in time it was using V2 of the API, so I've just upgraded it to use V3 - but it still won't work in IE.

It works fine in Chrome & Firefox. But in all versions of IE I've tired (6,7,8) the Google Map doesn't load fully.

The problem
The Google Map DIV will generally load all the controls (Zoom, Powered by Google, map types) but the actual map tiles do not appear in IE. I can just see the grey background of the DIV>

What I've tried
I've commented down the JavaScript code to just the following on the page, but it still has the same problem:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt; 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt; 

<script type="text/javascript" > 

    var map;

    $(document).ready(function () {
        initialize(); // Set-up Google map        
    });

    function initialize() {
        var options = {
            zoom: 9,
            center: new google.maps.LatLng(51.335759, -2.870178),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("googleMap"), options);
    }

</script>

Answer 1

I'm going completely from memory here, but try inserting var just before you greate the Map object and removing the var map at the top. So:

var map = new google.maps.Map...

I can confidently state that the problem is with IE and global/local variables, ie, your map variable.

Answer 2

I'm not sure, but it might be a cross-browser difference in function hoisting. Try declaring your initialize function before your document ready block.

Answer 3

I've finally tracked the problem down.

Turns out someone else had included the sleight.js script () in our Master Page.

This JavaScript is designed to get PNG transparency working in IE5.5+, however a knock on affect is that it stops Google Maps working.