Google Mapは別ファイルでロードされていません

私のモニターにGoogleマップは表示されませんが、すべてのコードを単一のHTMLファイルに入れてスクリプトタグを使用すると動作します。Google Mapは別ファイルでロードされていません

index.htmlファイルは次のとおりです。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    </head> 
    <body> 
    <div id="map"></div> 

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIpWlWVDAqVEyW20SX6MfThL-iz9IWeQA&callback=initMap" 
    ></script> 
    </body> 
</html>

Script.jsファイルは次のとおりです。

function initMap() { 

    var map; 
      map = new google.maps.Map(document.getElementById('map'), 
      { 
       center: { lat: -34.397, 
         lng: 150.644 
         }, 
       zoom: 8 
      } 
      ); 
      }

のstyle.cssファイルには、次のとおりです。

* element that contains the map. */ 
    #map { 
    height: 100%; 
    } 
    /* Optional: Makes the sample page fill the window. */ 
    html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    }

出典

2017-07-09 Aaswin Sinha

コンソールログにエラーがないかチェックしましたか？ – navigator

yesコンソールログにエラーがありません –

マップdivにコンテンツが埋め込まれているかどうかブラウザで調べましたか？ – arifCee

#map { width:100%; height:200px;}

または全部埋めるためにウィンドウ：

#map { width:100%; min-height:100%;}

（最小身長のプロパティを持つ最初の子の場合） PS。オーバーフローを追加しようとすることもできます：隠し; 2番目の例では。

出典

2017-07-09 08:30:06 Wordica

script.jsを実行すると、id = "map"のdivを検索しようとします。しかし、それは初期化されていない、まだ。だから、あなたは二つのことを行う必要があります。

がscript.jsがページの後initMap()コールあなた<div id="map"></div>

後はをロードしたファイルを含めます。例えば。このように（最後に）<script>initMap()</script>

出典

2017-07-09 08:32:27 arifCee

うまくいけない助け –

私はあなたのHTMLを統合し、正常に動作します。何らかの理由で、別のファイルにコールバック関数が動作していません。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <style> 
     #map { 
     height: 100%; 
    } 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
    </style> 
    <script> 
    function initMap() { 
    var map; 
    map = new google.maps.Map(document.getElementById('map'), 
    { 
     center: { lat: -34.397, lng: 150.644}, 
     zoom: 8 
    } 
    ); 
    } 
    </script> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIpWlWVDAqVEyW20SX6MfThL-iz9IWeQA&callback=initMap" 
    ></script> 
    </body> 
</html>

出典

2017-07-09 08:38:26 navigator

何か別にあなたが意味する??? –

別のファイルで呼び出されたときにコールバック関数が機能していないようです。エラーは報告されていませんが。 – navigator

ドキュメントによると：、ちょうどあなたのマップの後にあなたのJavaScript（script.js）を置きます。

<div id="map"></div> 
<script src="script.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIpWlWVDAqVEyW20SX6MfThL-iz9IWeQA&callback=initMap" async defer></script>

編集：2番目のスクリプトの末尾に「は非同期を延期」を忘れないでください。

出典

2017-07-09 08:42:52

は、上記の変更を実装した後でもまだ動作していません。 –

これは非常に奇妙です。自分のコードを自分の「www」フォルダにコピーして、直接動作します。 "style.css"と "script.js"へのパスは正しいですか？ JavaScriptがブラウザで無効になっている可能性があります... –

Google Mapは別ファイルでロードされていません

答えて

関連する問題