Google Map API v3 lädt nicht in IE9

Question

Ich recherchierte das Thema so viel wie ich konnte, fand aber keine Lösung.

In allen Browsern mit Ausnahme von Internet Explorer (Version 8 oder 9) funktioniert das folgende Skript zum Laden von Google Maps. In IE8 und IE9 scheint jedoch die Google Maps API (v3) nicht zu laden. Ich habe versucht, bestimmte Fehler in der Konsole zu finden, aber nichts gefunden.

Html

<style type="text/css"> 
    #map_canvas { 
     height: 292; 
     width:980 
    } 

    .contactus-Captcha { 
     clear:both; 
    } 
</style> 

<div id="map_canvas"></div> 

Javascript

function initialize() { 
      var homeLatlng = new google.maps.LatLng(29.70280,-95.51731); 

      var myOptions = { 
       zoom: 15, 
       center: homeLatlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 


       var contentString = '<div id="content">'+ 
         '<div id="siteNotice">'+ 
         '</div>'+ 
         '<h3>ABC</h3>'+ 
         '<div id="bodyContent">'+ 
         '<div class="AddressWrap"><div style="width:100%; margin:1 auto; float:left;"><img src="<?php echo ROOTPATH; ?>images/location-icon.png" style="float:left; padding-right:5px;"> <h3 class="Marker"> xyz</h3></div><h3 class="Mobile"> <img src="<?php echo ROOTPATH; ?>images/mob-icon2.png" style="float:left; padding-right:12px; "> 123445</h3></div>'+ 
         '</div>'+ 
         '</div>'; 
        var infowindow = new google.maps.InfoWindow({ 
         content: contentString 
        }); 

      var image = new google.maps.MarkerImage(  
       '<?php echo ROOTPATH; ?>images/addres-icon.png', 
       new google.maps.Size(32, 32), // size 
       new google.maps.Point(0,0), // origin 
       new google.maps.Point(16, 32) // anchor 
      ); 

      var shadow = new google.maps.MarkerImage(
       'http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png', 
       new google.maps.Size(59, 32), // size 
       new google.maps.Point(0,0), // origin 
       new google.maps.Point(16, 32) // anchor 
      ); 

      var homeMarker = new google.maps.Marker({ 
       position: homeLatlng, 
       map: map, 
       title: "xyz", 
       icon: image, 
       shadow: shadow 
      }); 
      google.maps.event.addListener(homeMarker, 'click', function() { 
         infowindow.open(map,homeMarker); 
        }); 
     }  

    $(document).ready(function() {    
    initialize(); //Calling on load 
    }); 

Kann mir jemand helfen? Ich wäre sehr dankbar!

Answer 1

Ihre Karte hat keine Größe. Wechsel:

#map_canvas { height: 292; width:980 } 

An:

#map_canvas { height: 292px; width:980px }