GoogleマップAPIは、開発ツールが開いているときにのみ動作します。

Question

ちょっと私のプロジェクトでマップを作成しようとしています。私はGoogleマップは、Googleからの私のAPI_KEYを得た。その後

2

作業が、マーカーされて... ...私は、コンソールにはエラーを持っていないが、私はGoogleのChromeで開発者ツールを開くまで、doesntの表示は何もマップまだコンソールにエラーはありません。

私が間違って何をやっていますか？

スタイル：

#map { 
width: 100%; 
height: 300px; 
background-color: grey; 
} 

コード：

<div id="map"></div> 
<script> 
    function initMap() { 
    var myLatLng = {lat: -0.250608, lng: 52.025528}; 

    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: myLatLng 
    }); 

    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     title: 'Title!' 
    }); 
    } 
</script> 
<script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap"> 
</script> 

Answer 1

表示されていないか次元がないコンテナ内のマップを初期化しています。

オープニングのdevのツールマップ自体のサイズを変更する原因となるブラウザのサイズ変更をトリガー**

あなたはいずれかの方法でそれを修正することができます。

どちらかそれはコンテナになるまでマップを初期化するために待って

見えます

またはgoogle.maps.event.trigger('resize',map)（mapは のマップインスタンスです）が表示されます。

**これが起こっていることを証明する：開発ツールをドッキングして浮動ウィンドウにします。その後、あなたのページを（devツールを閉じて）更新し、地図を見に失敗した後に再びdevのツールを開くが、あなたのブラウザがサイズ変更されていないためにまだ表示されません（あなたの開発ツールが浮かんでいて、ドッキングされていないため）

Answer 2

あなたがマップのAPIを使用するためにGoogleとあなたのURL /ドメインを登録してくださいましたかhttps://developers.google.com/maps/premium/previous-licenses/clientside/auth#register-urls