Google Maps API -- 地图不显示答案

【问题标题】：Google Maps API --Map not displayingGoogle Maps API -- 地图不显示
【发布时间】：2015-09-30 12:55:17
【问题描述】：

第一次使用 Google 地图 API，但地图没有显示。我已经阅读了很多关于导致问题的高度和宽度声明的内容，我尝试从 % 切换到 px 以及所有相关样式，但没有任何变化。

我正在使用 rails 4.2.1
Map Javascript 最初是 Bootstrap 模板的一部分

这是我的 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);

在 index.html.erb 中，

应该显示地图的 div：

<div id="map"></div>

链接到 API 的脚本标签：

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=my_api_key_here">
</script>

我的 .less 文件中的关联样式：

#map {
width: 100%;
height: 200px;
margin-top: 100px;
}

@media(min-width:767px) {
  #map {
    height: 400px;
    margin-top: 250px;
  }
}

我的 .css 文件中的关联样式：

#map {
width: 100%;
height: 200px;
margin-top: 100px;
}

@media(min-width:767px) {
  #map {
    height: 400px;
    margin-top: 250px;
  }
}

任何建议将不胜感激，谢谢！

【问题讨论】：

您是否确认页面中正在加载 JavaScript？有一个名为 gmaps4rails 的 gem，它可以让 Rails 应用程序中的谷歌地图更好地工作：github.com/apneadiving/Google-Maps-for-Rails
检查 js 是否在 firefox 中加载的最佳方法是什么？

标签： javascript css ruby-on-rails google-maps-api-3 less

【解决方案1】：

我找到了解决此问题的答案。

我在 html 内的 script 标签中添加了callback=initialize 选项：

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"></script>

这篇文章有帮助：

Async Google Maps API v3 undefined is not a function

【讨论】：

您的意思是对 init 的回调而不是“初始化”。