Google Maps Places API 地图未显示答案

【问题标题】：Google Maps Places API Map not showing upGoogle Maps Places API 地图未显示
【发布时间】：2012-09-07 15:12:04
【问题描述】：

我刚开始使用 google maps places API，并且已经能够将这段代码整合在一起，但地图没有显示出来。我想这是某个地方的一个小错误，但我找不到它。如果有人能指出这将是一个巨大的帮助，并且是否有任何在线或任何免费的 IDE 可以很好地捕捉这样的错误？

代码：http://jsbin.com/ifuwel/1/edit

【问题讨论】：

尝试展示一张基本地图，并通过可以追溯的细微变化逐步进行。此外，您应该获得 firefox 和 firebug 扩展程序才能看到控制台。
是的，这正是我所做的。我有基本的地图工作，并得到了很多其他的选择，然后这个因为某种原因难倒了我。

标签： javascript google-maps-api-3 google-places-api

【解决方案1】：

您有 2 个不同的 ID（“map”和“map_canvas”）。试试看：

map = new google.maps.Map(document.getElementById('map_canvas'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: pyrmont,
    zoom: 15
});

【讨论】：

【解决方案2】：

试试这个基本的例子

HTML

 <body onload="initialize()">
   <div id="map_canvas"></div>
 </body>

Javascript

    <script>
  function initialize() {
    var mapOptions = {
      zoom: 4,
      center: new google.maps.LatLng(-33, 151),
      panControl: false,
      zoomControl: false,
      scaleControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById('map_canvas'),
                                  mapOptions);
  }
</script>

CSS

    <style>
     html, body {
     height: 100%;
     margin: 0;
     padding: 0;
      }

     #map_canvas {
     height: 100%;
     }

     @media print {
     html, body {
     height: auto;
     }

     #map_canvas {
     height: 650px;
     }
      }
    </style>

如果需要，CSS 有助于获得 100% 的宽度和高度

【讨论】：