Javascript 谷歌地图是灰色的
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13525749/
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 is grey
提问by AppRoyale
I am using google maps in a mobile application using html and javascript. When the I load the map I am only able to see 5% of the map in the upper left corner. 95% of the div container is grey. When I want to check the div with Firebug the whole map is loaded suddenly. What can that be? I tried already several Stackoverflow threads but no solution worked for me. Thank you.
我在使用 html 和 javascript 的移动应用程序中使用谷歌地图。当我加载地图时，我只能在左上角看到地图的 5%。95% 的 div 容器是灰色的。当我想用 Firebug 检查 div 时，突然加载了整个地图。那可以是什么？我已经尝试了几个 Stackoverflow 线程，但没有解决方案对我有用。谢谢你。
Code:
代码：
<link type="text/css" rel="stylesheet" href="jquery.mobile...>
<link type="text/css" rel="stylesheet" href="index.css">
<script type="text/javascript" src="jquery.mobile...></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile...></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"> </script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="index.js"></script>
<div id="map" style="width: 700px; height: 700px;"></div>
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
index.js
索引.js
$(document).ready(function() {
$(window).resize(function() {
google.maps.event.trigger(map, 'resize');
});
});
When I use div attributes measured in % or em it doesnt work at all.
当我使用以 % 或 em 衡量的 div 属性时，它根本不起作用。
回答by Douglas
Try calling the resize method on document ready too:
尝试在文档就绪时调用 resize 方法：
$(document).ready(function() {
$(window).resize(function() {
google.maps.event.trigger(map, 'resize');
});
google.maps.event.trigger(map, 'resize');
});
回答by Ismail Kuyu
Check your mapOptions whether its center or other properties are correct. In my occasion, center property was uninterpretable by google map; although the page was totally errorless in terms of css and jsp, it showed me just grey map all the time.
检查您的 mapOptions 其中心或其他属性是否正确。在我的情况下，谷歌地图无法解释中心财产；尽管该页面在 css 和 jsp 方面完全没有错误，但它始终向我展示了灰色地图。
回答by stealthysnacks
For my case, just calling map.refresh()fixed this issue. I am using Gmaps.
就我而言，只需调用即可map.refresh()解决此问题。我正在使用 Gmap。
回答by user3709875
This happened to me because the mapTypeId was NULL.
这发生在我身上，因为 mapTypeId 为 NULL。
Try:
尝试：
map.setMapTypeId("roadmap");
回答by Faheem Hameed
In my case I had missed to provide the Longitude which came from an external API. Once the API was fixed to include Longitude, the issue was solved.
就我而言，我错过了提供来自外部 API 的经度。一旦 API 被修复为包含经度，问题就解决了。
回答by Jim
I had a similar question using angular 5
I could only get the map to refresh / recreate by using a setTimeoutANDa setZoom(even though the level is the same)
我有一个类似的问题，使用angular 5
我只能通过使用setTimeoutANDa来刷新/重新创建地图setZoom（即使级别相同）
// set timeout.
setTimeout(() => {
console.log("attempting refresh");
google.maps.event.trigger(this.map, "resize");
this.map.setZoom(8);
},
100);
What's fascinating about the refresh, is that it moves the map the second time it is displayed. Google maps is clearly not bug free.
刷新的迷人之处在于它在第二次显示时移动地图。谷歌地图显然不是没有错误的。
回答by Rob
In my case my map wasn't loading because I didn't set a zoomoption.
在我的情况下，我的地图没有加载，因为我没有设置zoom选项。
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10, // Forgot to set this prop
center: new google.maps.LatLng(-33.92, 151.25)
});
