郵便番号から住所を入力する方法。Geocoding APIで簡単に実装。

Google Cloud Platform
Google Cloud Platform
0

この記事では、Google Map API(Geocoding)を使って、郵便番号を入力すると都道府県や市区町村が自動で入力されるような機能を実装する方法をメモする。

スポンサーリンク

最終的な目標

上の画像のように7桁の郵便番号を入力して、住所取得のボタンを押すと都道府県と市区町村が自動的に入力される。

スポンサーリンク

HTMLコード

<form method="POST">
    <p>
        <label for="id_zip_code">郵便番号</label><br>
        <div>
            <input type="text" name="zip_code" maxlength="7" required="" id="id_zip_code" placeholder="郵便番号">
            <span>
                <button id="search-button" type="button">
                    住所取得
                </button>
            </span>
        </div>
    </p>
    <p>
        <label for="id_address1">都道府県</label><br>
        <input type="text" name="address1" maxlength="5" required="" id="id_address1" placeholder="都道府県">
    </p>
    <p>
        <label for="id_address2">市区町村・番地</label><br>
        <input type="text" name="address2" maxlength="50" required="" id="id_address2" placeholder="市区町村・番地">
    </p>
    <p>
        <label for="id_address3">建物名・部屋番号</label><br>
        <input type="text" name="address3" maxlength="50" id="id_address3" placeholder="建物名・部屋番号">
    </p>
    <div>
        <input type="submit" value="保存"></input>
    </div>
</form>

<script type="text/javascript">
    $(document).on('click', '#search-button', function(event){
        $.ajax({
            url: 'https://maps.googleapis.com/maps/api/geocode/json',
            type: 'GET',
            dataType: 'json',
            data: {
                key: 'YOUR_API_KEY',
                address: $('#id_zip_code').val(),
                language: 'ja'
            }
        }).done(function(data) {
            if (data.status == "OK") {
                var components = data.results[0].address_components;
                if (components.length == 5) {
                    $('#id_address1').val(components[3].long_name);
                    $('#id_address2').val(components[2].long_name + components[1].long_name);
                } else if (components.length == 6) {
                    $('#id_address1').val(components[4].long_name);
                    $('#id_address2').val(components[3].long_name + components[2].long_name);
                }
            }
        });
    });
</script>

上記コードにYOUR_API_KEYの部分を変えるとそのまま使えるはずである。

jQueryを使ってAjax通信をしているが、流れを簡単に説明すると、

  • search-buttonのidを振られた「住所取得」のボタンを押す。
  • 郵便番号をクエリに入れてGeocoding APIにリクエストを投げる。
  • 返ってきたjsonデータから都道府県と市区町村のデータを取り出し、フォームに入力する。

返ってくるjsonは次のようになっている。

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "150-0002",
               "short_name" : "150-0002",
               "types" : [ "postal_code" ]
            },
            {
               "long_name" : "渋谷",
               "short_name" : "渋谷",
               "types" : [ "political", "sublocality", "sublocality_level_2" ]
            },
            {
               "long_name" : "渋谷区",
               "short_name" : "渋谷区",
               "types" : [ "locality", "political" ]
            },
            {
               "long_name" : "東京都",
               "short_name" : "東京都",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "日本",
               "short_name" : "JP",
               "types" : [ "country", "political" ]
            }
         ],
         "formatted_address" : "日本 〒150-0002",
         "geometry" : {
            "bounds" : {
               "northeast" : {
                  "lat" : 35.6641357,
                  "lng" : 139.7139666
               },
               "southwest" : {
                  "lat" : 35.6535047,
                  "lng" : 139.7005659
               }
            },
            "location" : {
               "lat" : 35.6603981,
               "lng" : 139.7051782
            },
            "location_type" : "APPROXIMATE",
            "viewport" : {
               "northeast" : {
                  "lat" : 35.6641357,
                  "lng" : 139.7139666
               },
               "southwest" : {
                  "lat" : 35.6535047,
                  "lng" : 139.7005659
               }
            }
         },
         "place_id" : "ChIJOQzMw16LGGARC7r5VTLvztg",
         "types" : [ "postal_code" ]
      }
   ],
   "status" : "OK"
}

Google Maps Platform、Geocoding APIについて

Geocodingについてはこちらに詳しく書いてある。

Overview  |  Geocoding API  |  Google Developers
Geocoding converts addresses into geographic coordinates to be placed on a map. Reverse Geocoding finds an address based on geographic coordinates or place IDs.

APIキーの取得の仕方は以下に詳しく書かれている。
APIキーの制限は必ず設定するべきである。少なくとも上記のHTMLコードはAPIキーを直張りしているので悪用する人が出てくる可能性もある。(理想的にはAPIキーも見えない状態にするべき。)アプリケーションの制限でHTTPリファラーを選択することはできず、IPアドレスを選択する必要があることに注意がいる。WebサーバーのIPアドレスを入れると良い。

Using API Keys  |  Geocoding API  |  Google Developers

値段は記事を書いている2021年5月の段階で200ドルまで無料で、それ以降は1リクエストで0.005ドルかかる。
つまり、月40000リクエストまでは無料である。また、リクエスト数が多くなるにつれて安くなる。詳しくは以下に書かれている。
また、Google Maps Platformの「割り当て」というところでリクエスト数を制限することができるので、料金に不安がある場合は上限を設定すると良い。

Geocoding API Usage and Billing  |  Google Developers
スポンサーリンク
H-MEMO

コメント