-1
私はかなりAPIに新しいので、私は自分の位置を取得してそれを新しいgoogle.maps.Mapに渡して実行しようとしていますが、地図は表示されません。私はまだいくつかのエラーをコミットしたと思うが、javascriptのコンソールは表示されませんでした。私のコードを見て、何をすべきかを見てください。前もって感謝します。Googleマップではウェブアプリケーションで空白のシートが表示されました
var map;
function displayLocation(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var pLocation = document.getElementById("location");
pLocation.innerHTML = latitude + ", " + longitude;
showMap(position.coords);
}
function showMap (coords){
var googleLatLong = {lat: coords.latitude, lng: coords.longitude};
console.log(googleLatLong);
var mapOptions = {
zoom: 11,
center: googleLatLong,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapDiv = document.getElementById("map");
map = new google.maps.Map(mapDiv, mapOptions);
console.log(map);
}
function displayError(error){
var errors = ["Unknow error", "Permission denied by user", "Position not available", "Timeout error"];
var message = errors[error.code];
console.warn("Error in getting your location: " + message, error.message);
}
window.onload = function(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(displayLocation, displayError);
} else {
alert("Error Occor!");
}
}
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: #fafafa;
font-family: Helvetica, Arial, sans-serif;
margin: 20px;
}
div #map{
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<h3>Find nearby places</h3>
<p id="location"></p>
<div id="map">Loading...</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MyKey">
</script>
<script src="script.js"></script>
</body>
</html>
こんにちはためMYKEY
を交換してください！私は実際にキーを生成してそこに入れましたが、まだ動作しませんでした。 –
データがある場合は変数（coords.latitude、coords.longitude）？ –