Google Maps API（JavaScript）：未显示地图

Question

我显然正在制作要显示地图的东西。

从字面上看，什么都没有发生-没有地图，没有错误，没有崩溃和烧伤。

这是我的代码：

<div style="height:100%; width: 100%;">
    <div id="map-canvas"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpgrLi55xM68AaSJOQPX5nzEOV7sw4KVY&callback=initMap"></script>

<script>
    function initMap() {
        var mapCanvas = document.getElementById("map-canvas");
        var mapOptions = {
            center: new google.maps.LatLng(53.419824, -3.0509294),

            mapTypeId: 'satellite',
            scrollwheel: true
        }
        var map = new google.maps.Map(mapCanvas, mapOptions);
    }

</script>

我尝试将父div的宽度/高度更改为PX，但是没有运气。

任何帮助都很棒

干杯

为了获得更好的见解，请在此处查看完整的页面代码： http : //pastebin.com/XrRYgtjz

Answer 1

我会说你有两个问题。

1. 您的地图div没有大小（您没有为匿名div <div style="height:100%; width: 100%;"> ）指定包含元素的大小）。

2. 您的MapOptions不包含必需的 / manditory zoom属性。

概念证明

代码段：

 function initMap() { var mapCanvas = document.getElementById("map-canvas"); var mapOptions = { center: new google.maps.LatLng(53.419824, -3.0509294), zoom: 5, mapTypeId: 'satellite', scrollwheel: true } var map = new google.maps.Map(mapCanvas, mapOptions); } 

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

 <div style="height:100%; width: 100%;"> <div id="map-canvas"></div> </div> <script deferred async src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script> 

Answer 2

<div style="height:100%; width: 100%;">

也许是height问题。 尝试更改为400px。 要么

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

编辑

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

<script>
    function initMap() {
        var mapCanvas = document.getElementById("map-canvas");
        var mapOptions = {
            center: new google.maps.LatLng(53.419824, -3.0509294),
            mapTypeId: google.maps.MapTypeId.SATELLITE,
            scrollwheel: true
        }
        var map = new google.maps.Map(mapCanvas, mapOptions);
    }   
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpgrLi55xM68AaSJOQPX5nzEOV7sw4KVY&callback=initMap"></script>

Answer 3

我认为问题在于您如何在mapOptions变量中描述新地图。 尝试将语法更改为以下形式，将mapCanvas作为第一个参数，并将options用作第二个参数：

  var mapOptions = new google.maps.Map(mapCanvas, {
            center: {lat: 53.419824, lng: -3.0509294}, 
            mapTypeId: 'satellite',
            scrollwheel: true
    });

我希望这有帮助！