谷歌地图不会出现
[英]Google map does not appear
问题描述
I'm following the introductory tutorial for Google Maps, but for some reason the map is not appearing on my webpage. 
我正在关注谷歌地图的入门教程 ，但出于某种原因，地图没有出现在我的网页上。 The relevant HTML/CSS/JS is: 相关的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_canvas div. 地图不会出现在map_canvas div中。
Update 更新
I've changed the page so that it doesn't use JQuery to load the map. 我已经更改了页面，因此它不使用JQuery加载地图。 It now uses exactly the same JS as in the tutorial, but still the map does not appear. 它现在使用与教程中完全相同的JS，但仍然没有出现地图。
6 个解决方案
解决方案1
15 已采纳 2011-10-06 20:52:30
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). （3）设置画布的大小以显示地图（再次：它在你的帖子中，但不在代码中）。 Afterwards you can change the size as you like. 之后您可以根据需要更改大小。
<div id="map_canvas" style="width:500px; height:300px"></div>
You can see the site running on jsfiddle . 您可以在jsfiddle上看到该网站正在运行。
解决方案2
0 2014-09-02 06:18:01
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. 你不应该忘记在放置地图的标签上使用文档类型和加载initialize（）javascript函数，并且不要忘记设置高度：和宽度：到样式表，我会工作。 if you did n't set height and width it will not show 如果你没有设置高度和宽度，它将不会显示
<!DOCTYPE html>
<body onload="initialize();">
<div style="height:350px; width:100%;" id="map-canvas"></div>
</body>
解决方案3
0 2017-01-07 16:48:12
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. 经过无数的挖掘和大量的帖子（不必要的过于复杂），我发现如果我只是添加高度和宽度样式INLINE ，地图加载。 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 : 我从当前（??） 谷歌地图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>
解决方案4
0 2011-10-06 06:40:53
Your problem is you're referring to jQuery syntax, but you've not included the jQuery library in your page. 您的问题是您指的是jQuery语法，但您没有在页面中包含jQuery库。 I get the JS errors: 我得到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. 第二个是这里的杀手。
解决方案5
-1 2011-10-05 23:34:22
You MUST use initialize as the function, so change your code as follows: 您必须使用initialize作为函数，因此更改您的代码如下：
$(function() {
To; 至;
function initialize() {
<body>
To: 至：
<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>
解决方案6
-2 2012-11-30 21:15:09
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. ..帮助了我 - 我将样式宽度/高度添加到标记中并且它有效。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.