javascript Google Maps API 地图未出现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3741150/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps API map doesn't appear
提问by Tim Rogers
I can't get my map to appear when I'm using the Google Maps API. I am trying to build an application, and it won't work there, but it is also broken in this testing page I've made. Does anyone know what it is that I'm doing wrong?
我在使用 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>
Thanks for any help. I'm very confused!
谢谢你的帮助。我很困惑！
回答by Daniel Vassallo
Give your map_canvasdiv a fixed width and height, and your example will work fine:
给你的map_canvasdiv 一个固定的宽度和高度，你的例子就可以正常工作：
<div id="map_canvas" style="width: 500px; height: 400px;"></div>
Otherwise, set the height to your htmland bodyas Google does in the API tutorials:
否则，将高度设置为您的html和bodyGoogle 在API 教程中所做的：
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
回答by user1890884
You might wanna make some custom CSS for that div that contains the map. i did the below coding in my css.. Hope it helps :D cheers !!
您可能想要为包含地图的 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;
}
回答by fresh.
it seems like it is not showing up on my client's live site as well. It was working up until couple of days ago. Perhaps google updated js and something broken? Because nothing changed on my side...
它似乎也没有出现在我客户的实时网站上。直到几天前它才开始工作。也许谷歌更新了js，有些东西坏了？因为我这边什么都没变...
