Question

所以，我有点困惑。我试着用这里提供的api和教程调用谷歌地图： https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map

但我似乎无法让它正常工作，我的地图div总是最终成为一个灰色的盒子。这是我使用的html和js。如果有某种明显的错误，或者如果我应该使用其他API，请告诉我。

<div id="map_canvas"></div>

...

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
  function initialize() {
    var map_canvas = document.getElementById("map_canvas");
    var mapOptions = {
      center: new google.maps.LatLng(44.5403, -78.5463),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(map_canvas);
  }
  google.maps.event.addDomListener(window, "load", initialize);
</script>

我的css设置为高度和宽度分别为300px和500px ......如果这对你个人很重要。

Answer 1

我认为您的代码不使用这些选项。我不确定这是问题，但这是一个问题：

尝试：

var map = new google.maps.Map(map_canvas, mapOptions);

Answer 2

如果您要查找要显示的地图，请从以下位置开始：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map_canvas" style="width:300;height:500">
<script>
var mapOptions = {
    center: new google.maps.LatLng(44.5403, -78.5463),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

var mapOpts = { mapTypeId: google.maps.MapTypeId.TERRAIN, zoom: 2, center: new google.maps.LatLng(20, 0) };

var map_canvas = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

</script>
</div>
</body>
</html>

Answer 3

我认为主要问题是初始化地图时不包括mapOptions。

它应该是这样的：

var map = new google.maps.Map(map_canvas, mapOptions);

〜尝试再次阅读所提供的教程，它定义了“中心”，“缩放级别＆＃39;”和“地图类型＆＃39;是必需的选项。

地图选项，例如中心，缩放级别和地图类型。可以设置更多选项，但这三个选项必需。

谷歌地图电话无效

3 个答案: