Google Maps and IE8 Zoom + InfoWindow Issues

Question

I have this JS that loads the google map API

function initialize() {
    var mapOptions = { center: new google.maps.LatLng(41.123105, -73.370886),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

The above JS is placed in a file and loaded after this google maps api call

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false" type="text/javascript"></script>
<script src="/Style Library/js/locationmap.js" type="text/javascript"></script>

The above tags are in the head and the HTML is as follows

<div class="locationsMap">
    <div style="display: none;">
        <asp:Label runat="server" ID="lblCenterLatLng" CssClass="divCenterLatLng" />
    </div>
    <div id="mapCanvas" class="mapCanvas" style="width: 450px; height: 450px;" />
</div>

I guess I should say all of this is happening in a SharePoint Web Part but it does work in IE9 as expected.

When the map is zoomed in IE8 the map disappears and is white. Any ideas?

Thanks

Answer 1

There is a problem with your IE8 specific css