GMEasy3リファレンス：：簡単にGoogleマップを設置できるライブラリ
- 最終更新日
- 2010/02/02
- バージョン
- 1.0.0
- ライセンス
- MIT
割と簡単にGoogleマップを設置できるライブラリです。
マーカーも設置できます。
住所検索もできます。
座標や倍率も拾えます。
名前はGMEasy3です。
APIのバージョンが3なので、煩わしいAPIキー要らずです！！！！！！１１１
サンプル
http://kuwappa.web2.jp/hatena/GMEasy3/
JavaScriptファイル
http://kuwappa.web2.jp/ELEPHANT/GoogleMap/GMEasy3_compression.js
htmlファイル解説
- 9行目
- マップオブジェクトの生成
- 括弧内の値
- 1つ目：Googleマップを表示させるdivタグのID。28行目参照(必須)
- 2つ目：マップの初期緯度(必須)
- 3つ目：マップの初期経度(必須)
- 4つ目：マップの初期倍率を0〜19で設定(必須)
o_googleMap = new GMEasy3("map", 34.99639438287466, 135.75445175170898, 13);
- 10行目
- マップの現在の緯度、経度、倍率を表示
- 括弧内の値
- 1つ目：緯度を表示させるタグのID。32行目参照
- 2つ目：経度を表示させるタグのID。33行目参照
- 3つ目：倍率を表示させるタグのID。34行目参照
o_googleMap.set_id_latLonZoom("lat", "lon", "zoom");
- 11行目
- ドラッグできる住所マーカーの座標を表示させるタグのIDを設定
- 括弧内の値
- 1つ目：緯度を表示させるタグのID。50行目参照
- 2つ目：経度を表示させるタグのID。51行目参照
o_googleMap.set_id_geoLatLon("lat_geocoder", "lon_geocoder");
- 13〜14行目
- 普通のマーカーを設置
- 括弧内の値
- lat ：マーカーの緯度(必須)
- lon ：マーカーの経度(必須)
- title：マーカーにマウスを載せたときに表示されるテキスト
- iw ：マーカーをクリックしたときに表示されるテキスト
- icon ：マーカーのアイコンの種類
o_googleMap.set_marker({lat:34.98545, lon:135.757755, title:"京都駅", iw:"京都駅", icon:"caution"}); o_googleMap.set_marker({lat:35.01325, lon:135.750897, title:"二条城", iw:"二条城"});
- 16行目
- ドラッグできる住所マーカーを設置
- 括弧内の値
- lat ：マーカーの緯度(必須)
- lon ：マーカーの経度(必須)
o_googleMap.set_geoMarker({lat:35.00609, lon:135.74295});
- 18〜19行目
- ドラッグできる住所マーカーを設置
- 括弧内の値
- lat ：マーカーの緯度(必須)
- lon ：マーカーの経度(必須)
- title ：マーカーにマウスを載せたときに表示されるテキスト
- iw ：マーカーをクリックしたときに表示されるテキスト
- icon ：マーカーのアイコンの種類
- idLat ：マーカーの緯度を表示させるタグのID。38行目参照
- idLon ：マーカーの経度を表示させるタグのID。39行目参照
- idZoom：マーカーの住所を表示させるタグのID。40行目参照
o_googleMap.set_dragMarker({lat:35.00695, lon:135.768554, title:"緑", iw:"緑", icon:"green", idLat:"dragLat0", idLon:"dragLon0", idAddress:"dragAddress0"}); o_googleMap.set_dragMarker({lat:35.00479, lon:135.769587, title:"橙", iw:"橙", icon:"orange", idLat:"dragLat1", idLon:"dragLon1", idAddress:"dragAddress1"});
- 21行目
- ページ上にマップを表示させる
o_googleMap.disp();
- 48〜49行目
- 入力された住所を検索し、ドラッグできる住所マーカーを移動させる
住所検索<input type="text" id="address" value="京都駅" size="100" /> <input type="button" value="検索" onclick="o_googleMap.geocoder_search( document.getElementById('address').value );" /><br />
以下は細かい仕様です。
メソッド：：Setter
| メソッド | 説明 |
|---|---|
| set_flg_scaleControl(bool flg) | マップ下部への距離計表示／非表示 |
| set_flg_mobileMode(bool flg) | 携帯サイト向けに倍率の範囲を8〜17に固定／非固定 |
| set_id_latLonZoom(str lat[, str lon[, int zoom] ]) | マップの現在の緯度、経度、倍率を表示する要素のID |
| set_id_geoLatLon(str lat[, str lon]) | ジオコーディングマーカーの経度、緯度を表示する要素のID |
| set_marker(object object) | 通常マーカーを設置 object(str lat, str lon[, str title[, str iw[, str icon] ] ]) |
| set_geoMarker(object object) | ドラッグできるジオコーディングマーカーを設置 object(str lat, str lon[, str title]) |
| set_dragMarker(object object) | ドラッグできるマーカーを設置 object(str lat, str lon[, str title[, str iw[, str icon[, str idLat[, str idLon[, str idAddress] ] ] ] ] ) |
メソッド：：ジオコーディング
| メソッド | 説明 |
|---|---|
| geocoder_search(str address) | 住所から座標を検索し、マーカーを置く |
