仕事で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」要素にしてますのでページ全体です。
[sourcecode language=’html’]




[/sourcecode]

HTML

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

[/sourcecode]

カスタマイズも可能！

[sourcecode language=’html’]

[/sourcecode]

z

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

m

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

b

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

t

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

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

[sourcecode language=’html’]

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

参考サイト

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

ダウンロード

プラグイン(3KB)

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