• かちびと.net

    GoogleMapをインクリメンタルサーチし、位置情報を取得するjQueryプラグイン・Address Pickerのご紹介。なかなか便利そうだったのでメモしておきます。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services