JavaScript Google Maps APIマップが表示されていませんか？

Question

私は多くの類似した記事を見てきましたが、明らかなものは見当たりませんでしたが、私はすべてを試しました。私はそれを修正しようとしているW3の学校のコードをコピーして貼り付けました。 index.htmlのボタンを使用して、ユーザーの緯度と経度を取得し、それを表示します（これは学校のプロジェクトでもあり、要件の1つです）。それから私はまた、ユーザーの場所の地図を取得し、それを表示する必要があります。 私のボタンをクリックすると、私の場所には左上のウィンドウ（Chrome btwを使用）でプロンプトが表示され、許可と言います。私のコードはポップアップしますが、マップは表示されません。何もポップアップすることはできません。どこにいても大した空白がありません。私は、関連するコードとloc.jsファイルを持つindex.htmlをコピー＆ペーストします。 私はGoogleから無料で入手できる鍵を持っていますが、修正されませんでした。

Index.htmlと

<script src = "loc.js"></script> 

<input type ="button" value="Get Location" onclick="getLocation(); getMap();"> 
<div id="spot"></div> 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDEiqN2L1odkK645Il8bBVCDqatth6aZyU&callback=getMap"></script> 
<div id="userMap" style="width:100%;height:400px;"></div> 

loc.js

function getLocation() { 
 
\t var userSpot = document.getElementById("spot"); 
 
\t //Using navigator, retrieves the users current location (works better with mobile phones) 
 
    if (navigator.geolocation) { //If the user says no (this prompts the user if they want their location known) 
 
\t \t \t \t \t \t \t \t //then it'll go ahead and retrieve their location, if not prompts error message. 
 
     navigator.geolocation.getCurrentPosition(showLocation); 
 
    } else { 
 
     userSpot.innerHTML = "Geolocation is not supported by this browser type."; 
 
    } 
 
} 
 

 
function showLocation(position) { 
 
\t var userSpot = document.getElementById("spot"); 
 
\t //Retrieves latitude and longitude using this second function called in the first 
 
    userSpot.innerHTML = "Latitude: " + position.coords.latitude + 
 
    "<br>Longitude: " + position.coords.longitude; 
 
} 
 

 
function getMap() { 
 
\t var currPosLat = position.coords.latitude; 
 
\t var currPosLng = position.coords.longitude; 
 
\t 
 
\t var mapOptions = { 
 
\t center: new google.maps.LatLng(-34.397, 150.644), 
 
\t zoom:12, 
 
\t }; 
 
\t 
 
\t var map = new google.maps.Map(document.getElementById("userMap"), mapOptions); 
 
}

Answer 1

はLOCであなたのGetMapリクエストのコード（）関数に問題があることを気づきました。 js

変数「位置」は、内部に入るときに定義されていません。だからそれは壊れている。

私はその後、あなたのコードを実行しようとしたラインの下に取り外し、

再び
var currPosLat = position.coords.latitude; var currPosLng = position.coords.longitude;

を試してみてください。地図が表示されます。

EDIT：

こんにちは、私はあなたのコメントを見ました。私は下の地図をセンタリングするためのすばやく簡単な方法を作った。同様にそれが見えるようにマーカーを追加しました素敵な:)

index.htmlを

<script src = "loc.js"></script> 

<input type ="button" value="Get Location" onclick="getLocation()"> 
<div id="spot"></div> 
<div id="userMap" style="width:400px;height:100%;"></div> 


<script src="http://maps.google.com/maps/api/js?key=AIzaSyDEiqN2L1odkK645Il8bBVCDqatth6aZyU&callback=initMap"></script> 

loc.js

function getLocation() { 
    var userSpot = document.getElementById("spot"); 
    //Using navigator, retrieves the users current location (works better with mobile phones) 
    if (navigator.geolocation) { //If the user says no (this prompts the user if they want their location known) 
           //then it'll go ahead and retrieve their location, if not prompts error message. 

    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function (position) {  
      currentLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
      map.setCenter(currentLocation); 
      marker = new google.maps.Marker({ 
       position: currentLocation, 
       map: map 
      }); 
      showLocation(position); 
     }); 
    } 

    } else { 
     userSpot.innerHTML = "Geolocation is not supported by this browser type."; 
    } 
} 

function showLocation(position) { 
    var userSpot = document.getElementById("spot"); 
    //Retrieves latitude and longitude using this second function called in the first 
    userSpot.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude; 
} 

function initMap() { 

    var uluru = {lat: -25.363, lng: 131.044}; 
     map = new google.maps.Map(document.getElementById('userMap'), { 
      zoom: 4, 
      center: uluru 
    }); 
    marker = new google.maps.Marker({ 
     position: uluru, 
     map: map 
    }); 
} 

参考：https://developers.google.com/maps/documentation/javascript/adding-a-google-map あなたがAPIのドキュメンテーションを参照することができますあなたがどこかについているならば。あなたがこれを行うことができますので、これは

Answer 2

「位置」ホープは（コメントは下記参照）GetMapリクエスト（）関数で定義されていない。

そして、すべての最初は、inputタグにGetMapリクエスト（）の呼び出しを削除します。

function showLocation(position) { 
    var userSpot = document.getElementById("spot"); 
    // Save your coords 
    var lat = position.coords.latitude; 
    var lon = position.coords.longitude; 

    userSpot.innerHTML = "Latitude: " + lat + 
    "<br>Longitude: " + lon; 
    // Pass the coords as a parameter in getMap() function 
    getMap(lat, lon) 
} 

function getMap(lat, lon) { 
    // Set the paremeters in mapOptions 
    var mapOptions = { 
    center: new google.maps.LatLng(lat, lon), 
    zoom:12, 
    }; 

    var map = new google.maps.Map(document.getElementById("userMap"), mapOptions); 
} 

私はあなたを助けました。