Google Maps API（JavaScript）：地図が表示されない

Question

私は明らかに地図を表示することを意図しています。

文字通り何も起こりません。地図はありません。エラーはありません。クラッシュと焼損はありません。私は運とPXのに親のdivの幅/高さを変更しようとした

<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> 

：

は、ここに私のコードです。

すべてのヘルプは素晴らしいです

乾杯優れた洞察力のために

、ここでは完全なページのコードを表示：heightで http://pastebin.com/XrRYgtjz

Answer 1

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

たぶん、問題は。 400pxに変更してみてください。 それとも

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

EDIT

<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 2

私はこの問題は、あなたのmapOptions変数に新しいマップを説明してきた方法であると思います。第一引数と第二引数にオプションとしてmapCanvasを渡して、このような何かに構文を変更してみてください：

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

私はこれが役に立てば幸い！

Answer 3

私はあなたに2つの問題があると言います。

1. 地図のdivが（匿名のdiv <div style="height:100%; width: 100%;">のために含む要素のサイズを指定しない）サイズを持っていません。

2. ごMapOptions必要/manditory zoomプロパティが含まれていません。

proof of concept fiddle

コードスニペット：

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>