フラスコのアプリにGoogleマップが表示されない

Question

Googleマップを技術的にロードするフラスコのアプリをtutorialとして作成しました。

しかし、驚いたことに、すべてがローカルでhosted on herokuに動作していますが、エラーは表示されませんが、マップは読み込まれません。

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

      <script type="text/javascript"> 
        var map; 
        function initMap() { 
         map = new google.maps.Map(document.getElementById('map'), { 
          center: {lat: {{lat}}, lng: {{lng}}}, 
          zoom: 16 
          }); 
         console.log("map function"); 
         console.log(map); 
        } 
      </script> 

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={{key}}&callback=initMap" async defer></script> 

JavaScriptコンソール出力を見てください、あなたは最初のものはマップ機能秒1はinitMap関数に渡された緯度と経度の作成したマップオブジェクトであると言い、2枚のプリントが表示されます。これは、マップオブジェクトが作成されたが、マップIDでdivを更新しなかったことを意味します。

GoogleページのError Code listedはありません。

Answer 1

ほとんどの場合、これはAPIキーと関係があります。正しい方法を作成し、有効で実行中であることを確認してください。私は助けてくれるといいですね。