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

 

 

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

2017.09.24

Googleマップ上にベクトルタイルを描画してみる

みなさん、こんにちは。

前回のブログで紹介したベクトルタイルを 、Google マップ上に描画する方法を調査してみました。

&nb・・・

続きを読む

2017.10.21

Google Charts を利用して日本地図を色塗りしてみる

みなさん、こんにちは。

今回は、Google Charts の GeoChart を利用して、日本地図を都道府県単位で色塗りしてみたいと思いま・・・

続きを読む

2017.04.15

JavaScript API でよく使う地図オプション

みなさん、こんにちは!

今回は、「JavaScript・・・

続きを読む

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

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)