Googleマップがhtmlで表示されない

お詫び申し上げます、私は本当にこれに新しいです - 私はGoogleのチュートリアルに従っていますが、私はhtmlで表示する地図を得ることができません。私はスクリプトを介して私はいくつかの手動コンソールログを見ることができるようにjavascriptが実行されている知っている。私はまた、場所がユーザーから取られていることを知っています。Googleマップがhtmlで表示されない

私は2つの別々のファイル、googlemaps.jsとhome.htmlあります

<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Title</title> 
    <script src="{% static 'js/googlemaps.js' %}"></script> 
    <script async defer 
     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9etM9rqnYas63ypURAkvEFn_W_sU0NM4&callback=initMap"> 
    </script> 
    </head> 
    <body> 
    <div id="map"> 
     <style> 
     #map { 
      height: 400px; 
      width: 100%; 
     } 
     </style> 
    </div> 
    </body> 
    </html>

そして、私は持っているのjsファイルに：

var curLat = null; //user location 
var curLon = null; 

function getLocation() { 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(showPosition); 
    } else { 
     window.alert("no location"); 
    } 
} 
function showPosition(position) { 
    curLat = position.coords.latitude; 
    curLon = position.coords.longitude; 
} 
function initMap(){ 
    getLocation() //finds out user location to fomat the map 
    if (curLat == null){ 
    curLat = 42.3601; //if the user location cannot be found, set default ones 
    curLon = -71.0589; // of boston 
    console.log("random locations"); 
    } 
    var options = { 
    zoom:10, 
    center:{lat:curLat, lng:curLon} 
    } 
    var map = new google.maps.Map(document.getElementById("map"),options); 
}

可能であれば、あなたは何に私をポイントしてくださいでした私はHTMLで間違っていますか？ありがとう

出典

2017-09-18 theMicroGirl

ちょうど '' –

@ YadhuBabuをご利用いただきありがとうございます。{％static 'js/googlemaps.js'％}はdjangoの構文です。のみを使用すると、関連するファイルが見つかりません。また、質問の状態として、私はスクリプトを介して私はいくつかの手動コンソールログを見ることができるようにjavascriptが実行されていることを知っている。したがって、jsの問題ではなく、htmlの問題 – theMicroGirl

場合、私は使用しますマップのスタイルプロパティが正しく設定されていません。

私のために同じフォルダの作業でこの二つのファイル：

のindex.html：

<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title>Title</title> 
<script src="googlemaps.js"></script> 

</head> 
    <body> 
    <div id="map" style="height: 400px; width: 100%;"> 
    </div> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9etM9rqnYas63ypURAkvEFn_W_sU0NM4&callback=initMap"> 
    </script> 
    </body> 
</html>

そしてgooglemaps.js：

var curLat = null; //user location 
var curLon = null; 

function getLocation() { 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(showPosition); 
    } else { 
     window.alert("no location"); 
    } 
} 
function showPosition(position) { 
    curLat = position.coords.latitude; 
    curLon = position.coords.longitude; 
} 
function initMap(){ 
    getLocation() //finds out user location to fomat the map 
    if (curLat == null){ 
    curLat = 42.3601; //if the user location cannot be found, set default ones 
    curLon = -71.0589; // of boston 
    console.log("random locations"); 
    } 
    var options = { 
    zoom:10, 
    center:{lat:curLat, lng:curLon} 
    } 
    var map = new google.maps.Map(document.getElementById("map"),options); 
}

よろしく。

出典

2017-09-18 10:36:54

これはうまくいきました、ありがとう！素敵な一日を過ごしてください:) – theMicroGirl

ありがとう！どういたしまして –

まず、あなたが使用しているのは、通常、小枝などのテンプレートシステムに使用されているものです。 jsファイルをインクルードするには、

です。その後、（curLat = null）と書いてある場合は、変数をnullに設定します。

1 - あなたは
2 - そのダブル等しい場合（curLat == null）のノートを使用する必要があります：あなたは2個のエラーを持っている（curLatが== nullの|| curLon == null）の

出典

2017-09-18 10:30:09 Tom

こんにちはトム、あなたの答えをありがとうございました - まあ私はそれを見ていない==について発見！また、jsファイルは、コンソールログで見ることができるように正常に実行されます。私はちょうどHTMLで地図を見ることができません.... – theMicroGirl

divのスタイルを移動して、ヘッダ。 – Tom

Googleマップがhtmlで表示されない

答えて

関連する問題