Google Maps APIのバージョン2は利用していましたが、今さらながらバージョン3がリリースされていたことに気づきました。バージョン3からはAPIキーを取得せずに使えるようになっているので、さらに敷居が低くなりました。

バージョン3からはGPSセンサーを利用出来るようになっていて、最初のコードを呼び出す時の引数にtrueを指定することで機能します。iPhoneやAndroidでの利用では利用価値大になりましたね。

今回は勉強がてらjQueryのプラグインとして書いてみました。

View Demo

オプションとして指定出来るものは次の通り

1. 緯度・経度
2. 尺度
3. 左上コントローラーの表示・非表示
4. 右上地図タイプを切り替えるセレクターの表示・非表示
5. 左下の地図のスケール表示の表示・非表示
6. 最初に表示される地図の種類
7. マーカーの画像
8. ふきだしのテキスト
9. 最初に表示したときのふきだしの表示・非表示

まずはjqueryとGoogle Mapsとプラグインを読み込みます

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" charset="utf-8"></script>
<script type="text/javascript" src="gmap.js" charset="utf-8"></script>

次にオプションの設定をします。設定するのは緯度・経度、地図の尺度、ふきだしの設定をするぐらいであとは初期値での使用で平気だと思います。

$(function() {
	$('div#map_canvas').gmap({
		centerLat: 35.697128, //緯度
		centerLng: 139.702563, //経度
		zoom: 16 //地図の尺度
		popup: 'ふきだしのテキスト', //ふきだしのテキスト。(X)HTMLも記述出きます。
		popupState: true //trueなら読み込んだ時にふきだしを表示。falseなら表示しない(クリックで表示されます)
	});
});

その他のオプションの説明をしておきます。

navCtr

左上のコントローラーの表示・非表示を切り替えます。初期値はtrue。falseを指定することにより非表示になります。
[例] navCtr: false

mapTypeCtr

右上の地図タイプを切り替えるセレクターの表示・非表示を切り替えます。初期値はtrue。falseを指定することにより非表示になります。
[例] mapTypeCtr: false

scaleCtr

左下に表示される縮尺の表示・非表示を切り替えます。初期値はfalse。trueを指定することにより表示されます。
[例] scaleCtr: true

mkImg

マーカーの画像を変更する場合に画像のパスを指定します。初期値はデフォルトのマーカー。
[例] mkImg: './common/img/icon_map01.png'

利用は御自由にどうぞ。

Download