Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

前回書いたこれの続き。

http://qiita.com/qwe001/items/de4cf622cc22e49b9ada

はじめに

  • 住所、緯度、経度の入力欄があったとする
<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キーの入力は必須らしいので、遅かれ早かれ必ず取得して下さい。以上。

qwe001
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away