0

我正在将一些旧代码更新到 Google Maps API v3，但我无法让地图显示任何内容。将对象转储map到控制台显示地图已正确初始化，并且应该加载到正确的 div 中 - 但除了灰色框外什么都没有显示。

我已经为地图 div 设置了宽度/高度和溢出，因为这似乎是最常见的问题。

但是，我无法让它工作。有任何想法吗？

http://jsfiddle.net/Nbjrf/1/

谢谢

4

2 回答 2

1 
<!DOCTYPE html>
   <html>
      <head>
         <title>Google Maps JavaScript API v3 Example: Map Simple</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
         <meta charset="utf-8">
         <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
         <style>
             #map_canvas { height: 200px; width: 400px; overflow: visible; }
         </style>
      </head>
      <body>
         <div id="map_canvas"></div>
         <script>
            var myLatlng = new google.maps.LatLng(-34.397, 150.644);
            var mapOptions = {
               zoom: 8,
               center: myLatlng,
               mapTypeId: google.maps.MapTypeId.HYBRID
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
         </script>  
      </body>
</html>

这对我有用。

之间有很大区别

var maptype = 'google.maps.MapTypeId.HYBRID';
var mapInitOpts = {
      mapTypeId: maptype
};

和

var mapInitOpts = {
    mapTypeId: google.maps.MapTypeId.HYBRID
};

在一个实例中，您将文本“google.maps.MapTypeId.HYBRID”分配给 mapTypeId，另一个实例将变量 google.maps.MapTypeId.HYBRID 的值分配给 mapTypeId。

为了让你的例子起作用，你至少应该把

var maptype = google.maps.MapTypeId.HYBRID;

不是

var maptype = 'google.maps.MapTypeId.HYBRID';

此外，我无法让我的示例在没有 zoom: 和 center: 的情况下工作。这些可能是必需的。

于 2012-12-05T22:48:43.143 回答
0

您将 mapTypeId 常量放在引号中，“google.maps.MapTypeId.HYBRID”；这是一个常量，而不是字符串：google.maps.MapTypeId.HYBRID

此外，您需要提供地图中心和缩放级别。这有效：

var mapInitOpts = {
    mapTypeId: google.maps.MapTypeId.HYBRID,
    center: new google.maps.LatLng(-32.891058,151.538042),
    zoom: 16
};

map = new google.maps.Map(document.getElementById("map_canvas"), mapInitOpts);

最后，您不再需要提供 API 密钥。

于 2012-12-05T22:45:52.553 回答