MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2017.07.09

Geocoding API を使って郵便番号から住所を入力するフォーム

郵便番号から住所入力

みなさん、こんにちは。

よく入力フォームで住所を入力するとき、郵便番号から自動で住所を入力する方法がありますね。今回は、Google Maps Geocoding API を使用してその方法を実現したいと思います。

 

早速、サンプルのプログラムを作成したので、操作してみてください。7桁の郵便番号を入力し、住所取得ボタンをクリックすると、都道府県、市区町村、住所欄に取得したデータが入力されます。

 

コーディング方法は、下記のとおりです。注意点として、ジオコードの結果に「address_components」という配列のデータがあります。この配列が住所によって、5個か6個になりますので、数に合わせて出力方法を変更しています。

$.ajax({
	url: 'https://maps.googleapis.com/maps/api/geocode/json',
	type: 'GET',
	dataType: 'json',
	data: {
		key: {API_KEY},
		address: $('#postal').val(),
		language: 'ja'
	}
}).done(function(data) {
	if (data.status == "OK") {
		var components = data.results[0].address_components;
		if (components.length == 5) {
			$('#pref').val(components[3].long_name);
			$('#city').val(components[2].long_name);
			$('#addr').val(components[1].long_name);
		} else if (components.length == 6) {
			$('#pref').val(components[4].long_name);
			$('#city').val(components[3].long_name + components[2].long_name);
			$('#addr').val(components[1].long_name);
		}
	}
});

 

更に拡張し、Places API オートコンプリートの機能を追加しました。郵便番号を入力していくと、候補が表示されるようになります!

 

テキストボックスにオートコンプリートを設定します。

var initAutocomplete = function() {
	// 対応させるテキストボックス
    var input = document.getElementById('postal');
    var options = {
		types: ['(regions)'],	// 検索タイプ
		componentRestrictions: {country: 'jp'}	// これで日本国内の住所しか表示されなくなる
    };
    var autocomplete = new google.maps.places.Autocomplete(input, options);
};

先程と「address_components」の配列の順番が違いますので、ご注意ください。

$.ajax({
	url: 'https://maps.googleapis.com/maps/api/geocode/json',
	type: 'GET',
	dataType: 'json',
	data: {
		key: {API_KEY},
		address: $('#postal').val(),
		language: 'ja'
	}
}).done(function(data) {
	if (data.status == "OK") {
		var components = data.results[0].address_components;
		if (components.length == 5) {
			$('#postal').val(components[4].long_name);
			$('#pref').val(components[2].long_name);
			$('#city').val(components[1].long_name);
			$('#addr').val(components[0].long_name);
		} else if (components.length == 6) {
			$('#postal').val(components[5].long_name);
			$('#pref').val(components[3].long_name);
			$('#city').val(components[2].long_name + components[1].long_name);
			$('#addr').val(components[0].long_name);
		}
	}
});

 

いかがでしたか?

Google Maps API を活用すると、簡単に住所入力の補完ができますね。是非、みなさもご活用ください。

 

マルティスープでは、Google Maps API に関する質問、あるいは Google Map 以外の地図に関する開発のご相談も承っています。是非、下記の問い合わせフォームよりお送りください。

 

 

【関連記事】こんな記事も読まれています

2016.07.24

スタイルマップを使用して地図の雰囲気を変えてみる

みんさん、こんにちは!

いつも見慣れたグーグルマップだけど、利用するためには地図の色が雰囲気に合わない事ってありますよね? 実はグーグルマップ・・・

続きを読む

2017.05.17

Googleマップで「戦前の23区を見渡せる空中写真」を表示する

みなさん、こんにちは。

国土地理院が、4月28日に「戦前の23区が見渡せる空中写真」を公開しました。

続きを読む

2017.05.26

日光いろは坂で「Roads API」を使ってみたら・・・

みなさん、こんにちは。

先日開催した「Google Maps 活用セミナー」には、多数のご来場ありがとうございました。

 ・・・

続きを読む

 - Google Maps APIs, Google Maps Geocoding API, Google Places API, スタッフ日記