Question

我在使用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>

感谢您的帮助。我很困惑！

Answer 1

为map_canvas div提供固定的宽度和高度，您的示例将正常工作：

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

否则，请将Google的高度设置为API tutorials中的html和body：

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

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

Answer 3

它似乎也没有出现在我客户的现场网站上。它一直在工作，直到几天前。也许谷歌更新了js和一些破碎的东西？因为我身边没有任何改变......

Google Maps API地图未显示

3 个答案: