chihung
10/15/2019 - 7:06 AM

click to get current location

<!-- 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>