Google地图在最简单的示例中不起作用

Question

我有下一个代码：

<div id="gmap" style="width:500px;height:300px;"></div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<script>
    map = new google.maps.Map(document.getElementById('gmap'));
</script>

这是无法正常使用gmap的最小示例。 Gmap叠加层会出现（没有地图），并且当您单击map-container时会引发异常：

Uncaught TypeError: Cannot read property 'x' of undefined

我不知道如何解决此问题，而Google无法帮助我：| 请帮忙。

谢谢

Answer 1

您需要为地图设置默认的LatLng和一些选项，这应该可以工作。

var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

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

这是一个有效的小提琴：

http://jsfiddle.net/4a87k/310/

删除选项时，您将遇到与所描述的问题类似的问题。

Answer 2

初始化地图时，您缺少地图选项。

必需的两个选项是缩放级别和地图中心位置。

修改您的JavaScript以：

var mapOptions = {
   zoom: 15,
   center: new google.maps.LatLng(0,0)
};
map = new google.maps.Map(document.getElementById('gmap'), mapOptions);

而且你应该很好走

Answer 3

  var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644) }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

 html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> <div id="map-canvas"></div> 

试试这个。

您需要指出至少一根线才能在mapoption中显示地图。