Question

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

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

然而，我无法让它发挥作用。有什么想法吗？

由于

Answer 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
};

在一个实例中，您将向mapTypeId指定文本“google.maps.MapTypeId.HYBRID”，另一个用于指定mapTypeId变量值google.maps.MapTypeId.HYBRID。

为了你的榜样，你应该至少放

var maptype = google.maps.MapTypeId.HYBRID;

不是

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

另外，我不能让我的例子在没有缩放的情况下工作：和中心：。可能需要这些。

Answer 2

你有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密钥了。

Gmap api3和bootstrap =灰色块

2 个答案: