Javascript 谷歌地图不出现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7668549/
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 map does not appear
提问by Dónal
I'm following the introductory tutorialfor Google Maps, but for some reason the map is not appearing on my webpage. The relevant HTML/CSS/JS is:
我正在关注Google 地图的介绍性教程，但由于某种原因，该地图没有出现在我的网页上。相关的 HTML/CSS/JS 是：
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main"/>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
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="width: 400px; height: 400px"></div>
</body>
</html>
The map does not appear within the map_canvasdiv.
地图不会出现在map_canvasdiv 中。
Update
更新
I've changed the page so that it doesn't use JQuery to load the map. It now uses exactly the same JS as in the tutorial, but still the map does not appear.
我更改了页面，使其不使用 JQuery 加载地图。它现在使用与教程中完全相同的 JS，但仍然没有出现地图。
回答by Jiri Kriz
There are 3 problems with your code:
您的代码有 3 个问题：
(1) add the following lines before <script type="text/javascript">function initialize() {
(1) 在前面添加以下几行 <script type="text/javascript">function initialize() {
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
This is in the post of your answer, but it is not in your file http://www.iol.ie/~murtaghd/map/map.htm.
这是在您的答案的帖子中，但不在您的文件http://www.iol.ie/~murtaghd/map/map.htm 中。
(2) You need to call initalize()(again: it is in your post, but not in the code):
（2）您需要调用initalize()（再次：它在您的帖子中，但不在代码中）：
<body onload="initialize();">
(3) Set the size of the canvas to get the map displayed (again: it is in your post, but not in the code). Afterwards you can change the size as you like.
(3) 设置画布的大小以显示地图（再次：它在您的帖子中，但不在代码中）。之后，您可以根据需要更改大小。
<div id="map_canvas" style="width:500px; height:300px"></div>
You can see the site running on jsfiddle.
您可以看到在jsfiddle上运行的站点。
回答by hengsopheak
You should not forget to used document type and load initialize() javascript function on the tag that you place your map and don't forgot set height: and width: to your stylesheet and I will work. if you did n't set height and width it will not show
您不应该忘记在放置地图的标签上使用文档类型并加载 initialize() javascript 函数，并且不要忘记将 height: 和 width: 设置为您的样式表，我会工作。如果你没有设置高度和宽度它不会显示
<!DOCTYPE html>
<body onload="initialize();">
<div style="height:350px; width:100%;" id="map-canvas"></div>
</body>
回答by user2305363
After countless digging and tons of posts (that were needlessly overly complicated), I found that if I just add the height and width styles INLINE, the map loaded. I could NOT set the height and width of the map element in the header or in an external style sheet -- the map will disappear. Everything else I pulled from the current (??) google maps api docs:
经过无数次挖掘和大量帖子（不必要地过于复杂），我发现如果我只添加高度和宽度样式INLINE，地图加载。我无法在标题或外部样式表中设置地图元素的高度和宽度——地图将消失。我从当前 (??) google maps api 文档中提取的所有其他内容：
Simple as this:
就这么简单：
<div id="mapWrapper" style="height:500px; width:500px;">
<div id="map" style="height:100%"></div>
</div> <!-- end of the mapWrapper -->
<script>
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
回答by duncan
Your problem is you're referring to jQuery syntax, but you've not included the jQuery library in your page. I get the JS errors:
您的问题是您指的是 jQuery 语法，但您尚未在页面中包含 jQuery 库。我收到 JS 错误：
Error: l.google.maps.Load is not a function
Source File: http://www.iol.ie/~murtaghd/map/map_files/main.js
Line: 42
Error: $ is not defined
Source File: http://www.iol.ie/~murtaghd/map/map.htm
Line: 24
The second one is the killer here.
第二个是这里的杀手。
回答by A.M.K
You MUST use initialize as the function, so change your code as follows:
您必须使用 initialize 作为函数，因此请按如下方式更改代码：
$(function() {
$(function() {
To;
到;
function initialize() {
function initialize() {
<body>
<body>
To:
到：
<body onload="initialize()" >
<body onload="initialize()" >
And:
});
和：
});
To:
}
到：
}
Which should result in:
这应该导致：
<!DOCTYPE html>
<html>
<head>
// This causes the common header, footer, styles, JQuery, etc. to be included
<meta name="layout" content="main"/>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
// Use JQuery to trigger the loading of the Map
function initialize() {
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="width:400px; height:400px"></div>
</body>
</html>
回答by Der
I had the same problem. This bit of code:
我有同样的问题。这段代码：
<div id="map_canvas" style="width:500px; height:300px"></div>
.. helped me - I added the style width/height into the markup and it worked.
.. 帮助了我 - 我在标记中添加了样式宽度/高度并且它起作用了。
