Javascriptで入力した住所から緯度経度を取得してフォームに入力する方法 #JavaScript

前回書いたこれの続き。

はじめに

住所、緯度、経度の入力欄があったとする

<tr>
    <th>住所</th>
    <td>
        <input id="address" name="address" type="text" value="">
    </td>
</tr>

<tr>
    <th>緯度</th>
    <td>
        <input id="latitude" name="latitude" type="text" value="">
    </td>
</tr>

<tr>
    <th>経度</th>
    <td>
        <input id="longitude" name="longitude" type="text" value="">
    </td>
</tr>

緯度、経度は最大3桁と、小数点6位までである。
東京都庁を例にすると、緯度は35.689634、経度は139.692101である。
しかしその値を直接入力で入れるのってなんかあほらしいですよね。
というわけで、住所の値から緯度と経度を計算して、その値をフォームに代入するみたいなのを作ります。

必要なもの

Google Map API
jQuery(筆者環境はVer1.9.1 もっと古いやつでもいけると思います。)

実装


<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key={ここにAPIキーを入力}"></script>
<script type="text/javascript">
/* ========================================================================
   Attribute Latitude And Longitude From Address With Google Maps API
 ========================================================================== */
$(function(){
    function attrLatLngFromAddress(address){
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({'address': address}, function(results, status){
            if(status == google.maps.GeocoderStatus.OK) {
                var lat = results[0].geometry.location.lat();
                var lng = results[0].geometry.location.lng();
                // 小数点第六位以下を四捨五入した値を緯度経度にセット、小数点以下の値が第六位に満たない場合は0埋め
                document.getElementById("latitude").value = (Math.round(lat * 1000000) / 1000000).toFixed(6);
                document.getElementById("longitude").value = (Math.round(lat * 1000000) / 1000000).toFixed(6);
            }
        });
    }

    $('#attrLatLng').click(function(){
        var address = document.getElementById("address").value;
        attrLatLngFromAddress(address);
    });
});
</script>

<tr>
    <th>住所</th>
    <td>
        <input id="address" name="address" type="text" value="">
    </td>
</tr>


<tr>
    <th>緯度</th>
    <td>
        <input id="latitude" name="latitude" type="text" value="">
    </td>
</tr>

<tr>
    <th>経度</th>
    <td>
        <input id="longitude" name="longitude" type="text" value="">
    </td>
</tr>

<input type="button" value="住所から緯度経度を入力する" id="attrLatLng">

APIキーの部分には各自が持っているAPIキーの値を入力してください。
APIキーの取得方法はここらへん見たり「Google Map API キー取得」とかでググって下さい。

https://developers.google.com/maps/documentation/javascript/get-api-key?hl=ja
http://nendeb.com/276
http://design-plus1.com/tcd-w/2016/06/google-maps.html

もし超急いでいるようならば下記のように別にAPIキーの値がなくても動きます。

<script src="https://maps.googleapis.com/maps/api/js"></script>

しかし、APIキーの入力は必須らしいので、遅かれ早かれ必ず取得して下さい。以上。