gmapview - スクリプトの記述なしでグーグルマップを表示

■gmapviewプラグインとは？

gmapviewプラグインはページ内に手軽にグーグルマップを表示するためのjQueryプラグインです。jQueryのバージョンは最新版（2.0系、1.10系）を想定していますが、多分1.3以降なら動作すると思います。gmapviewプラグインの現在の最新バージョンは1.0です。
また、HTML5ベースが前提です。（HTML4でも動作しますがHTML5での動作が前提です）
動作対象ブラウザは以下の通りです。基本的にjQueryとGoogle Maps APIがサポートする範囲になります。

Google Chrome
IE9+
Firefox
Safari 5+
Opera

ライセンスは特に明記していませんが、個人利用、商用利用可能でサイトに合わせて改変しても構いません。（もとは書籍のサンプルとして作成したものです）

Download gmapview.js.zip (gmapview.js.zipをダウンロード)

※Last update　2013/12/10 PM 1:19

■gmapviewサンプル

gmapviewプラグインのサンプルはgmapviewサンプルのページにアクセスしてください。
なお、ジオコーディングに失敗した場合は要素の背景色が赤色になりエラーメッセージが表示されます。


[gmapviewプラグインのサンプルをダウンロードする]


■使い方

以下のようにしてjQueryライブラリとgmapviewプラグインを読み込ませます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="gmapview</script>

まず、表示したい要素にclass="gmapview"を指定します。もちろん、他のCSSクラス名と混在させても構いません。プログラム内で使用しているCSSクラス名はgmapviewのみです。
次にdiv要素などでdata-gmap-adrs属性に表示したい場所の名前を指定するだけです。指定した名前の場所が地図の中心に表示されます。なお、地図を表示するコンテナ(div要素など）の表示サイズはスタイルシートで設定しておく必要があります。


<div class="gmapview" data-gmap-adrs="東京ディズニーランド"></div>

ズームレベル（表示倍率）はdata-gmap-zoom属性に数値で指定します。どこまでズームレベルが設定できるかは表示される場所によって異なります。


<div class="gmapview" data-gmap-adrs="国会議事堂" data-gmap-zoom="16"></div>

地図の種類を指定するにはdata-gmap-type属性にROADMAP、HYBRID、SATELLITE、TERRAINのいずれかの文字を指定します。省略した場合は通常の地図であるROADMAPが指定された状態と同じ結果になります。


<div class="gmapview" data-gmap-adrs="富士山" data-gmap-zoom="10" data-gmap-type="HYBRID"></div>

ジオコーディングに失敗した場合（不正な住所や場所が見つからなかった場合、リクエスト制限を超えた場合）には以下のように要素を赤く表示し、その中にエラーメッセージを表示します。


<div class="gmapview" data-gmap-adrs="pcfmx1mz 700"></div>


■注意事項

このプラグインはグーグルマップのサービス状況やサポートAPIおよびバージョンアップにともなう制限の影響を受けます。
特にリクエスト回数が多い場合や短時間に集中的にリクエストがある場合は正しく処理されない可能性があります。
スマートフォンではメモリの都合で一度に多くのグーグルマップを表示できないことがあるかもしれません。
利用規約に関してはグーグルマップ関係も参照してください。
不具合等ありましたらopenspc@alpha.ocn.ne.jpまでご連絡ください。