GoogleMapをインクリメンタルサーチし、位置情報を取得するjQueryプラグイン・Address Picker

住所を入力するとオートサジェスト
でGoogleMapから候補を出し、選択
するだけで位置を取得できるjQuery
プラグイン・Address Pickerをご紹介
します。動作も速くて少し驚きです。
GoogleMap APIを使用しています。

ちょっとこのタイトルだと誤解与えそうですね・・・オートサジェストとして出た候補を選択するだけで地図を変更、経度や緯度などの位置情報も取得するjQueryプラグインです。GoogleMapAPIを使っています。

Address Picker

入力するだけで候補が出るオートサジェスト機能と、候補にマウスを乗せるだけでするだけで地図が切り替わるインクリメンタルサーチ機能の付いた位置情報ピッカー。

と、聞こえはなかなかいいですけどオートサジェストが日本語入力だと若干挙動が微妙なんですよね。Chromeはそこそこ良い反応ですが、Firefoxは特に微妙ですな・・・IEは大丈夫ぽかったです。

サンプル見たほうが早いですね。

Sample

コード

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
	<script src="jquery.ui.addresspicker.js"></script>
	<script>
	$(function() {
		var addresspicker = $( "#addresspicker" ).addresspicker();
		var addresspickerMap = $( "#addresspicker_map" ).addresspicker({
		  elements: {
		    map:      "#map",
		    lat:      "#lat",
		    lng:      "#lng",
		    locality: '#locality',
		    country:  '#country'
		  }
		});
		var gmarker = addresspickerMap.addresspicker( "marker");
		gmarker.setVisible(true);
		addresspickerMap.addresspicker( "updatePosition");
		
	});
	</script>

APIと本体とUIとプラグインを読み込んで設定する。センサーパラメーターはfalseにします。

<div class='input'>
	<label>住所入力:</label> <input id="addresspicker_map" /><br/>
		<label>場所:</label> <input id="locality" disabled=disabled><br/>
		<label>国:</label> <input id="country" disabled=disabled><br/>
		<label>緯度:</label> <input id="lat" disabled=disabled><br/>
		<label>経度:</label> <input id="lng" disabled=disabled><br/>
</div>
    <div id="map"></div>

マークアップ。id=”map”にGoogleMapが呼び出されます。取得する項目には予めdisabledを書いて入力出来ないようにしておきます。

ライセンスはMITとGPLのデュアルライセンスです。Firefoxの日本語入力の問題だけなんとかなりませんかねー・・最近jQuery使ってて個人的に問題が起きるのFxが多い気がします。たまたまだろうけどもやもやしますな。

Address Picker