Google Map API v3无法在IE9中加载 [英] Google Map API v3 not loading in IE9

问题描述

在除Internet Explorer（版本8或9）之外的所有浏览器中，脚本以下将加载谷歌地图。然而，在 IE8 和 IE9 中，Google地图API（v3）似乎未加载。我一直在寻找控制台中的具体错误，但没有发现任何内容。

 < style type =text / css> 
 #map_canvas {
 height：292; 
 width：980 
} 
 
 .contactus-Captcha {
 clear：both; 
} 
< / style> 
 
< div id =map_canvas>< / div> 
  

Javascript

 函数初始化（）{
 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类= AddressWrap >< DIV风格= 宽度：100％;余量：1汽车;浮动：左; >< IMG SRC =< PHP的回波ROOTPATH;>图像/位置的图标？。 pngstyle =float：left; padding-right：5px;> < h3 class =标记> xyz< / h3>< / div>< h3 class =Mobile> < img src =<？php echo ROOTPATH;？> images / mob-icon2.pngstyle =float：left; padding-right：12px;> 123445< / h3>< / div>'+ 
'< / div>'+ 
'< / div>'; 
 var infowindow = new google.maps.InfoWindow（{
 content：contentString 
}）; 
 
变种图像=新google.maps.MarkerImage（
 '< PHP的回波ROOTPATH;？>图像/ ADDRES-的icon.png'，
新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 
）; 
 
 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）; 
}）; 
 
 $ b $（document）.ready（function（）{
 initialize（）; //调用load 
}）; 
  

任何人都可以帮我吗？我非常感谢！

您的地图没有尺寸。更改：

  #map_canvas {height：292;至： 
 
 <$ p 
 
 $ / code> 

$ p> #map_canvas {height：292px;宽度：980px}





I researched the topic as much as I could but didn't find a solution.

In all browsers except Internet Explorer (versions 8 or 9), the script below will work for loading Google maps. In IE8 and IE9, however, the Google maps API (v3) does not seem to load. I have looked to find specific errors in the console, but found nothing.

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
  });

Can anyone help me out? I would be very thankful!

解决方案

Your map doesn't have a size. Change:

#map_canvas { height: 292; width:980 }

To:

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

这篇关于Google Map API v3无法在IE9中加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！