javascript Google Maps API --地图不显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31363394/
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 displaying
提问by nextstep
First time using the Google maps API, and the map isn't showing up. I've read quite a few things regarding height and width declarations causing problems, I've tried switching from % to px with all associated styles and nothing changes.
第一次使用谷歌地图 API，地图没有显示。我已经阅读了很多关于导致问题的高度和宽度声明的内容，我尝试使用所有相关样式从 % 切换到 px 并且没有任何变化。
I'm working in rails 4.2.1
Map Javascript originally part of a Bootstrap template
我在 Rails 4.2.1 Map Javascript 中工作，
最初是 Bootstrap 模板的一部分
Here's my Javascript:
这是我的 Javascript：
function init() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(40.6700, -73.9400), // New York
// Disables the default Google Maps UI components
disableDefaultUI: true,
scrollwheel: false,
draggable: false,
// How you would like to style the map.
styles: [{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"lightness": 100
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"visibility": "on"
},
{
"color": "#C6E2FF"
}
]
},
{
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#C5E3BF"
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#D1D1B8"
}]
}]
};
// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);
// Get the HTML DOM element that will contain your map
var mapElement = document.getElementById('map');
// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
In the index.html.erb,
在 index.html.erb 中，
The div where the map is supposed to show up:
应该显示地图的 div：
<div id="map"></div>
The script tag to link to the API:
链接到 API 的脚本标签：
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=my_api_key_here">
</script>
Associated styles in my .lessfile:
我的.less文件中的相关样式：
#map {
width: 100%;
height: 200px;
margin-top: 100px;
}
@media(min-width:767px) {
#map {
height: 400px;
margin-top: 250px;
}
}
Associated styles in my .cssfile:
我的.css文件中的相关样式：
#map {
width: 100%;
height: 200px;
margin-top: 100px;
}
@media(min-width:767px) {
#map {
height: 400px;
margin-top: 250px;
}
}
Any advice would be greatly appreciated, thanks!
任何建议将不胜感激，谢谢！
回答by nextstep
I found an answer that fixed this solution.
我找到了解决此解决方案的答案。
I added the callback=initializeoption to the script tag inside the html:
我callback=initialize在 html 中的脚本标签中添加了该选项：
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"></script>
This post helped:
这篇文章帮助：
