javascript Google Maps API - 地图未显示 - 没有错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19049424/
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 not showing - no errors
提问by FooBar
I am trying to load a map from the Google API into a div. However, the map is not loaded, and no errors are outputted. This is the code:
我正在尝试将地图从 Google API 加载到 div 中。但是，不会加载地图，也不会输出任何错误。这是代码：
// google maps
var geocoder, map;
function codeAddress(address) {
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 8,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
});
}
google.maps.event.addDomListener(window, 'load', function() {
codeAddress('" . $location['address'] . " " . $location['zip'] . " " . $location['city'] . " " . $countries[$location['country']] . "');
});
I have been dealing with the problem for quite a long time now, and I am out of ideas.
我已经处理这个问题很长时间了，我已经没有想法了。
Anybody of you familiar with the google maps api, who knows what's wrong with my code? My div does exist with the ID: map_canvas.
你们中有人熟悉 google maps api，谁知道我的代码有什么问题？我的 div 确实存在 ID：map_canvas。
回答by FooBar
The problem was:
问题是：
- I didn't use API-key (even though it don't think this was nessecary, but it worked)
I didn't set the width/height of my div (
.map_canvas {width: 500px; height: 500px;}).I forgot to initalize like so:
initialize(); function initialize() { google.maps.event.addDomListener(window, 'load', function() { codeAddress('London'); }); }
- 我没有使用 API 密钥（即使它不认为这是必要的，但它有效）
我没有设置 div (
.map_canvas {width: 500px; height: 500px;})的宽度/高度。我忘了像这样初始化：
initialize(); function initialize() { google.maps.event.addDomListener(window, 'load', function() { codeAddress('London'); }); }
It now works. Thanks!
它现在可以工作了。谢谢！
回答by gnclmorais
Are you loading the Google Maps API...? Are not you missing something like this on your page?
您是否正在加载 Google Maps API...？你是不是在你的页面上缺少这样的东西？
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<your_api_key&sensor=false&callback=initialize"></script>
...
<script>
function initialize() {
codeAddress('" . $location['address'] . " " . $location['zip'] . " " . $location['city'] . " " . $countries[$location['country']] . "');
});
</script>
Please take a look at Google's example.
请看一下谷歌的例子。
回答by Andre Renaldo
I assume you load the map on 'map_canvas' div, right? Try to define the height and the width of those div on your stylesheet, that's what happen to me on my project and it's solved for me... The problem seems to happen because of other style attributes like position or float maybe.
我假设您在“map_canvas”div 上加载地图，对吗？尝试在样式表上定义这些 div 的高度和宽度，这就是我在我的项目中遇到的情况，它为我解决了......问题似乎是由于其他样式属性（例如位置或浮动）而发生的。
