<!-- google map api -->
<script async defer src="https://maps.googleapis.com/maps/api/js?language=jp&key=AIzaSyCvZrBFm0njirdhIzjaYRoPYcbtW8saHYo"></script>
<!-- <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-lqbnhiqPT0t0KVdB7sgMAPhPWbKDS_Q"></script> -->
<script>
// 結果を表示する
function setResult(message) {
document.getElementById('result').innerHTML = message;
}
// 現在地を表示する
function setNowLocation() {
if (!navigator.geolocation) {
setResult('非対応ブラウザです。');
return;
}
// 位置を取得する
navigator.geolocation.getCurrentPosition(successFunc, errorFunc);
}
// 位置取得成功時の処理
function successFunc(position) {
// 緯度経度を取得
var latlng = { lat: parseFloat(position.coords.latitude), lng: parseFloat(position.coords.longitude) };
// ジオコーダのコンストラクタ
var geocoder = new google.maps.Geocoder();
// Reverse Geocoding開始
geocoder.geocode({
// 緯度経度を指定
latLng: latlng
}, function (results, status) {
// 成功
if (status == google.maps.GeocoderStatus.OK) {
const data = results.find(result => result.types[0] === 'street_address');
const address = data.formatted_address.replace(/^日本、/, '');
setResult(address);
return;
}
setResult('通信に失敗しました。' + status);
});
}
// 位置取得失敗時の処理
function errorFunc(error) {
// エラーコード(error.code)の番号
// 0:UNKNOWN_ERROR 原因不明のエラー
// 1:PERMISSION_DENIED 利用者が位置情報の取得を許可しなかった
// 2:POSITION_UNAVAILABLE 電波状況などで位置情報が取得できなかった
// 3:TIMEOUT 位置情報の取得に時間がかかり過ぎた…
// エラー番号に対応したメッセージ
var errorInfo = [
"原因不明のエラーが発生しました。",
"位置情報の取得が許可されませんでした。",
"電波状況などで位置情報が取得できませんでした。",
"位置情報の取得に時間がかかり過ぎてタイムアウトしました。"
];
// エラー番号
var errorNo = error.code;
// エラーメッセージ
var errorMessage = "[エラー番号: " + errorNo + "]\n" + errorInfo[errorNo];
// アラート表示
// alert(errorMessage);
// HTMLに書き出し
setResult(errorMessage);
}
</script>
<h2 class="title-bg-white title-lg" onclick="setNowLocation()" style="cursor : pointer;">
Search
</h2>
<h2 class="title-bg-white" id="result">
<!-- 名古屋市◯◯区◯◯町◯◯◯◯◯ -->
</h2>