Google MAPを簡単に表示させるjQueryプラグイン「jquery.easyGmap.js」

Javascript

2010.05.17

仕事で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」
オススメ本(既読)
読んでみたい本(未読)

COMMENT!!

COMMENT PLEASE!!

トラックバック

「Google MAPを簡単に表示させるjQueryプラグイン「jquery.easyGmap.js」」のトラックバックURL
http://web-park.org/javascript/googlemap100515.html/trackback
about me

Manabu Kushimoto

Welcome to WEB-PARK.ORG!!
This domain was made since 2008 February.

Gender
Male
Birth year
1982
From
Osaka,Japan
  • はてな?ブックマーク
  • delicious
  • facebook