仕事でGoogle Maps APIを使う機会がありました。実は今回が初めての使用です。
率直な意見を言うと。。。面白い！！色んな関数が用意されているのでカスタマイズが楽しい！
そこで今回はGoogle Maps APIと連動したプラグインを作成しました。

「jquery.easyGmap.js」とは？

仕事でGoogle Maps APIを使ってみたところ一点不便なことがありました。
それはページごとに違うMapの見せ方をしたい場合にJavascriptのソースを作り直さなければならないことです。
それを解決するために「jquery.easyGmap.js」プラグインを作成しました。
これは任意のクラスを指定するだけで、住所を読み取りMapを表示させることが出来ます。

• ノーマルサンプル
• カスタマイズサンプル

導入方法

まず初めにGoogle Maps APIから登録を行い「キー」を取得します。
登録・キーの取得はこちらから。
http://code.google.com/intl/ja/apis/maps/signup.html

Javascript

まず上記ページから取得したコードを記載します。
次にjQueryプラグインなのでjQueryを読み込ませます。
プラグインを読み込ませた後に、指定範囲を記載します。
サンプルでは「body」要素にしてますのでページ全体です。

<script src="http://maps.google.com/maps?file=api&amp;amp;amp;amp;v=2&amp;amp;amp;amp;sensor=true&amp;amp;amp;amp;key=「取得したキー」" type="text/javascript"></script>
<script type="text/javascript" src="/js/lib/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.easyGmap.js"></script>
<script>
jQuery(function($){
	$("body").easyGmap();
});
</script>

HTML

HTMLは本当にシンプル！
親要素に「gMap」クラスを指定し、子要素に住所を記載した「gMapAddress」クラスを挿入します。
これだけでOK！記載した住所の位置が表示されます。

<div class="gMap"><p class="gMapAddress">大阪市浪速区</p></div>

カスタマイズも可能！

<script>
jQuery(function($){
	$("body").easyGmap(z,m,b,t);
});
</script>

z

最初に表示されるzoomの値を設定します。
初期値は15

m

マーカーの画像を指定出来ます。指定方法は下記サイトをご覧下さい。
http://googlemaps.googlermania.com/google_maps_api_v2/2-2.html

b

吹き出しの表示方法について指定します。初期値はクリックで表示します。

t

住所が見つからなかったときの文言を指定します。

カスタマイズ後のソースサンプル

<script>
jQuery(function($){
	var z = 20;
	var m = new GIcon();
	m.image = "http://googlemaps.googlermania.com/img/marker_flag.png";
	m.shadow = "http://googlemaps.googlermania.com/img/marker_shadow.png";
	m.iconSize = new GSize(35, 35);
	m.shadowSize = new GSize(35, 35);
	m.iconAnchor = new GPoint(0, 35);
	m.infoWindowAnchor = new GPoint(18, 11);
	var b = "move"
	var gMap = ".gMap";
	var t = "この住所は表示出来ません。";
	$("body").easyGmap(z,m,b,t);
});
</script>

現在吹き出しには記載した住所が表示されています。
まだそこをカスタマイズすることが出来ません。
今後かな。。。

参考サイト

http://googlemaps.googlermania.com/google_maps_api_v2/index.html

ダウンロード

プラグイン(3KB)

1. Web-Parkのホーム > 
2. Javascript > 
3. Google MAPを簡単に表示させるjQueryプラグイン「jquery.easyGmap.js」