除非将id设置为map_canvas，否则Google地图不会显示

Question

我想让google maps api v3正常工作，嗯，确实如此！但 ONLY 当我设置显示地图的div时，其id为“map_canvas”。这是否需要身份证明？如果您想在一个页面上显示多个地图怎么办？

我在我的js和html标记中设置了id

它完美无瑕地运作：

JS

<script type="text/javascript" >
 function initialize() {
    var mapOptions = {
     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"), mapOptions);
 }
</script>

HTML

 <div style="width:300px; height:300px;">
  <div style="width:100% height:100%" id="map_canvas"></div>
 </div>

它根据firebug加载地图，但在执行此操作时不显示任何内容：

JS

<script type="text/javascript" >
 function initialize() {
    var mapOptions = {
     center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("anyotherid"), mapOptions);
 }
</script>

HTML

 <div style="width:300px; height:300px;">
  <div style="width:100% height:100%" id="anyotherid"></div>
 </div>

更新

我上传了一个示例页面，用于重新定位我的问题： Example at athleticaustin.com/spots/test

我注意到的一个特点是，当我在显示地图的div上使用firebug中的firebug编辑id属性到map_canvas时，即使id仍然在头部的JS中定义为map_test，它也会突然出现。

Answer 1

  

是否需要身份证明？

没有

  

如果您想在一个页面上显示多个地图，该怎么办？

您为div使用多个唯一ID。

来自使用“地图”的文档中的

Here is an example 如果它不适合你，你做错了什么。我没有在你发布的片段中看到它。您是否有展示此问题的实时链接或jsfiddle？

Answer 2

中缺少分号

<div style="width:100% height:100%" id="anyotherid"></div>

应该是

<div style="width:100%; height:100%" id="anyotherid"></div>

（分号后宽度：100％;），但map_canvas片段中也缺少分号，因此可能不是问题，除非您错误地复制/粘贴。