JavaScript Google Maps API - ユーザーの場所の中心に地図がありません

Question

私は以前に投稿しましたが、質問を更新したかったので、他の質問を削除しようとしましたが、 私はGoogle Map APIのキーを持っていますが、マップは表示されず、読み込まれません。ここ 私のコードです：

Index.htmlと

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

loc.js

function getLocation() { 
    var userSpot = document.getElementById("spot"); 
    var map = document.getElementById("map"); 
    //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. 
     navigator.geolocation.getCurrentPosition(showLocation); 

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

     var mapOptions = { 
     center: new google.maps.LatLng(currPosLat, currPosLng), 
     zoom:12, 
     }; 

     var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
    } 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; 
} 

Answer 1

以下のコードを試してみてください、私は、ローカルおよびHTTPS上でマップをそれをテスト正しくロードされます。あなたのコードにいくつかの問題がありました。

非同期属性は、ブラウザが地図のJavaScript APIのロード中にあなたのウェブサイト の残りの部分をレンダリングすることができます：

あなたがasync属性を使用してGoogleマップAPIをロードする必要があります。 APIが準備完了すると、 はコールバックパラメータを使用して指定された関数を呼び出します。

ここにGoogleのドキュメントを参照してください：

[非推奨] getCurrentPosition：そうしないと、これらの二つの警告が表示されます、ライブバージョンは安全な原点を通過していることを確認し、またLoading the Google Maps Javascript API

（）とwatchPosition（）はもはや働きません は安全ではありません。この機能を使用するには、 をアプリケーションをHTTPSなどの安全な起点に切り替えることを検討する必要があります。詳細については、 https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-originsを参照してください。

ERRORは、（1）：だけ安全な起源は（参照： https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features）が許可されています。

地図の初期化はshowLocation()関数内で、位置座標は、現在のマップをレンダリングしますshowLocation()にあなたの初期化を移動し、バックgetLocation()に渡されませんする必要があります。

はあなたのジオロケーションがjsFiddleオンにされていない場合は、コンソールに警告が表示されますことを心に留めておいてください：

ERROR（1）：ユーザーが

テストそれがローカルまたはあなたのジオロケーション

を否定しましたサーバーを使用して作業バージョンを表示します。

ブラウザのジオロケーションに基づいて、マーカーで改訂版：

function getLocation() { 
 
\t var userSpot = document.getElementById("spot"); 
 
\t var map = document.getElementById("map"); 
 
\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, error); 
 
     
 
    } 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; 
 
    
 
    var currPosLat = position.coords.latitude; 
 
    var currPosLng = position.coords.longitude; 
 
    var centerPosition = new google.maps.LatLng(currPosLat, currPosLng); 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    
 
    var mapOptions = { 
 
     center: centerPosition, 
 
     zoom:12 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
 
    bounds.extend(centerPosition); 
 
    marker = new google.maps.Marker({ 
 
     position: centerPosition, 
 
     map: map, 
 
     //icon: 'map.png', 
 
     title: 'Some Random Location' 
 
    }); 
 
    
 
}; 
 

 
function error(err) { 
 
    console.warn(`ERROR(${err.code}): ${err.message}`); 
 
};

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