谷歌地图没有显示在页面上，没有 JS 错误答案

【问题标题】：Google Map not displaying on page, no JS errors谷歌地图没有显示在页面上，没有 JS 错误
【发布时间】：2016-06-15 11:42:46
【问题描述】：

我有以下带有地图画布的 HTML：

   <div style="height:100%; width:100%;">
        <div id="map-canvas"></div>
    </div>

我有以下 jQuery：

jQuery( document ).ready(function($) {

console.log(lat_long_vars.latitude);
console.log(lat_long_vars.longditude);

var map;
var map_properties = {
    center:new google.maps.LatLng(lat_long_vars.latitude,lat_long_vars.longditude),
    zoom:5,
    mapTypeId:google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map($('#map-canvas')[0], map_properties);

})

我还在我自己的 jQuery 之上包含了谷歌地图 CDN。 (https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize)

但是，地图画布不显示。明显的问题可能是纬度和经度变量没有设置，但它们肯定是。谁能建议这里的问题是什么？我不会拉回任何 JS 错误。

【问题讨论】：

我认为你应该设置map-canvas div的宽度和高度。

标签： jquery google-maps google-maps-api-3

【解决方案1】：

你需要：

为顶级div定义容器的高度和宽度（在我的sn-p下面是html/body）。
定义map-canvas div的高度和宽度。

代码 sn-p：

var lat_long_vars = {latitude: 42, longditude: -72};
jQuery(document).ready(function($) {

  console.log(lat_long_vars.latitude);
  console.log(lat_long_vars.longditude);

  var map;
  var map_properties = {
    center: new google.maps.LatLng(lat_long_vars.latitude, lat_long_vars.longditude),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map($('#map-canvas')[0], map_properties);

})

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:100%; width:100%;">
  <div id="map-canvas"></div>
</div>

【讨论】：