谷歌地图API地图未显示。

Question

谷歌地图API地图未显示。

5

当我使用Google Maps API时，无法让我的地图显示。我正在尝试构建一个应用程序，它在那里无法工作，但在我制作的测试页面中也无法正常工作。有人知道我做错了什么吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
    console.log("Initializing...");
  var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
}
</script>
</head>

<body onload="initialize()">
<div id="map_canvas" style="height: 100%; width: 100%;"></div>
</body>
</html>

谢谢您的帮助。我很困惑！（感谢任何帮助。我非常困惑！）

- Tim Rogers

这与问题有关，或许可以回答你的疑问。 https://dev59.com/XGkv5IYBdhLWcg3w_lvE#10210153 - rolfk

3个回答

2

您可能需要为包含地图的div制作一些自定义CSS。我在我的CSS中编写了以下代码。希望能有所帮助:D 乾杯!!

.map
{
/*    padding:5px;*/
    float:left;
    background-image:url('../images/mapContainer.png');
    width: 155px;
    height: 123px;
    background-repeat: no-repeat;
}
.mapImage
{
    padding-top: 4px;
    padding-left: 4px;
    width: 146px;
    height: 114px;
}
.mapAndInfoContainer
{
    float:left;
    width: 100%;
    height: 120px;
}

- user1890884

-1

看起来它在我的客户的实时网站上也没有显示出来。直到几天前它还能工作。也许是谷歌更新了JS，导致出现了一些问题？因为我这边什么都没改...

- fresh.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Daniel Vassallo · Accepted Answer

给你的map_canvas div设置一个固定的宽度和高度，你的示例就会正常工作：

<div id="map_canvas" style="width: 500px; height: 400px;"></div>

否则，将高度设置为您的html和body，就像Google在API教程中所做的那样：

<style type="text/css"> 
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>