[jquery.simpleMaps.js] 10分でGoogleMapが組み込めるカンタンjQueryプラグイン

Google Maps JavaScript APIもバージョン3が正式版になりました。APIキー要らずの新バージョンは、より手軽に地図をサイトに埋め込めますが、もっと簡単に使えるようにjQueryプラグインにしてみました。地図に変換したいdivに住所か施設名、正確に指定したい場合は座標を書いておくだけの簡単設定。とりあえず地図が表示されたらいいんだ！という場合にさっと使えます。

設定は3ステップ！

1. Google Maps Javascript APIとjQuery本体、そしてjQuery.simpleMaps.jsを読み込みます。

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>  <script src="jquery.simpleGmaps.js" type="text/javascript"></script>

2. 地図を表示したいdivを指定します。数字はズーム値です。

$('.map-canvas').simpleGmaps(15);

3. 地図に変換したいdivの中はこのように記述してください。

A: 施設名や住所を入力する場合

<div class="map-canvas" style="width: 300px; height: 300px;">  <span class="address">東京都千代田区永田町1丁目7番1号</span>  </div>

B: 座標を指定する場合

<div class="map-canvas" style="width: 300px; height: 300px;">  <span class="lat">34.710053</span>  <span class="lng">135.193849</span>  </div>

これだけです。表示例：

ダウンロード：jquery.simpleMaps.js (511)

他のオプションも実装できるようにしていきたいと思います

---