Google MAPを簡単に表示させるjQueryプラグイン「jquery.easyGmap.js」
仕事で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;v=2&amp;amp;amp;sensor=true&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
ダウンロード
- Web-Parkのホーム >
- Javascript >
- Google MAPを簡単に表示させるjQueryプラグイン「jquery.easyGmap.js」
Warning: count(): Parameter must be an array or an object that implements Countable in /home/markcrest/web-park.org/public_html/wordpress/wp-includes/class-wp-comment-query.php on line 405
COMMENT PLEASE!!
トラックバック
- 「Google MAPを簡単に表示させるjQueryプラグイン「jquery.easyGmap.js」」のトラックバックURL
Warning: Use of undefined constant display - assumed 'display' (this will throw an Error in a future version of PHP) in /home/markcrest/web-park.org/public_html/wordpress/wp-content/themes/default/single.php on line 105
http://web-park.org/javascript/googlemap100515.html/trackback
COMMENT!!
凄い!!結構自由にできちゃうんですね。