マルティスープ
Staff Blog

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 以外の地図に関する開発のご相談も承っています。是非、下記の問い合わせフォームよりお送りください。