谷歌地图不希望加载

问题描述：

加载谷歌地图时遇到问题。在我的头部分，我有以下代码（我有一个正确的谷歌API密钥）谷歌地图不希望加载

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false"></script> 
<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    #map_canvas { height: 100% } 
</style> 
<script type="text/javascript"> 
    function initialize() { 
     var myOptions = { 
      center: new google.maps.LatLng(-34.397, 150.644), 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
    } 
</script>

和我的身体部分开始如下：

<div class="page"> 
    <div id="header"> 
     <div id="title"> 
      <h1>My MVC Application</h1> 
      <div id="map_canvas" style="width: 100%; height: 100%"></div>

这是行不通的。但是，当我移动身体后的“map_canvas”div：

<body onload="initialize()"> 
<div id="map_canvas" style="width: 100%; height: 100%"></div> 
    <div class="page"> 
     <div id="header">

它一切正常。你能帮我吗。另外，我如何使用jQuery而不是调用initialize方法？

尝试像素的高度和宽度，而不是百分比，它应该工作 –

答

正如Bassam提到的，您需要设置明确的像素宽度和高度。否则，请查看用于page, header, and title元素的CSS。这些元素的宽度和高度需要级联到map_canvas元素。

使用jQuery代替初始化，从body元件除去onload="initialize()"并添加上述initialize()函数下面的代码：

$(document).ready(function() { 
    initialize(); 
});

谷歌地图不希望加载

相关推荐