予備知識・準備- APIを使用するには、Google提供のスクリプトをインクルードする。この際、登録キーが必要となる。
- 現在はバージョン２。バージョン１の機能は現在も使えるようだが、動作の保証はされない。
説明サイトも古いものがあるので注意。
見分け方として、バージョン１はGMapクラス、２ならGMap2クラスを使用する。 - GMap2クラスのインスタンスを生成し、各種オブジェクトを追加・設定していくことで、任意の地図を作成する。
- 一日あたりの使用量、1クライアントIPにつき15,000件という制限がある。応相談。
- Google ''Static'' Maps APIというのもある。こちらはJavaScript不要、画像ファイルとして地図を取得するAPI。
GMap2インスタンス生成 var map = new GMap2(document.getElementById("map"));
中心位置setCenterメソッドを用いる。- 第一引数で初期位置ポイントを
GLatLngオブジェクトで指定する。 - 第二引数でズーム度を指定する。大きい数値ほど、詳細表示になる。
map.setCenter(new GLatLng(36.033333, 139.15), 11);
panToメソッドを使う方法もある。panToの場合は、見える範囲であればスムーズ移動する。setCenterは瞬時移動のみ。map.panTo(new GLatLng(36.033333, 139.15));
相対移動panDirectionメソッドを使用すると画面サイズに合わせて表示位置を移動する。- 単位は、画面幅・高さの1/4。
map.panDirection(1, 0);
相対移動(ピクセル指定)ズーム- ズーム（縮尺）はレベルとして保持している。
- 値は0～19。数が大きいほどより詳細表示となるが、最大値は今後、変わる可能性がある。
- 総ての地域でレベル19まで表示可能というわけではなく、画像が用意されていない地域もある。
- ユーザ操作によるズーム度の変化をイベントとして取得することが出来る。
ズームの設定ズームの取得- 現在のズーム度を取得します。
level = map.getZoom();
ズームイン＆アウト地図タイプ| 定数 | 意味 | G_NORMAL_MAP | このマップタイプ (デフォルト) は通常の市街地図を表示します。 | G_SATELLITE_MAP | このマップタイプは航空写真を表示します。 | G_HYBRID_MAP | このマップタイプは航空写真上に透明な主な通りのレイヤを表示します。 | G_PHYSICAL_MAP | このマップタイプは地形や樹木などの地形的特徴を持つ地図を表示します。このマップタイプはデフォルトではマップタイプ コントロール内に表示されません。(2.94以降) | G_MOON_ELEVATION_MAP | このマップタイプは月表面の陰影の付いた地形図を表示します。地形は高度によって色分けされています。このマップタイプはデフォルトではマップタイプ コントロール内に表示されません。(2.95以降) | G_MOON_VISIBLE_MAP | このマップタイプは、月の周回軌道から撮影された写真を表示します。このマップタイプはデフォルトではマップタイプ コントロール内に表示されません。(2.95以降) | G_MARS_ELEVATION_MAP | このマップタイプは火星表面の陰影の付いた起伏図を表示します。地形は高度によって色分けされています。このマップタイプはデフォルトではマップタイプ コントロール内に表示されません。(2.95以降) | G_MARS_VISIBLE_MAP | このマップタイプは、火星の周回軌道から撮影された写真を表示します。このマップタイプはデフォルトではマップタイプ コントロール内に表示されません。(2.95以降) | G_MARS_INFRARED_MAP | このマップタイプは火星表面の陰影の付いた赤外線地図を表示します。温度が高くなるほど明るく、低くなるほど暗くなっています。(2.95以降) | G_SKY_VISIBLE_MAP | このマップタイプは、星空をモザイク合成した天球全体を覆う画像を表示します。 (2.95以降) | G_DEFAULT_MAP_TYPES | 上記で最初に挙げた3つの定義済みマップタイプの配列 (G_NORMAL_MAP、G_SATELLITE_MAP、G_HYBRID_MAP)。 | G_MOON_MAP_TYPES | 上記の2つの月のマップタイプの配列 (G_MOON_ELEVATION_MAP、G_MOON_VISIBLE_MAP)。 | G_MARS_MAP_TYPES | 上記の3つの火星のマップタイプの配列 (G_MARS_ELEVATION_MAP、G_MARS_VISIBLE_MAP、G_MARS_INFRARED_MAP)。 | G_SKY_MAP_TYPES | 上記の1つの星空のマップタイプの配列 (G_SKY_VISIBLE_MAP)。 |
map.setMapType(G_HYBRID_MAP);
地図タイプの取得コントロール簡易コントロールボタンコントロールボタンズームコントロール地図/衛星写真 切り替えボタン広域表示地図表示位置を指定するGControlPositionオブジェクトで表示位置を指定する。- 第一引数は基準点、第二引数は基準点からの距離。
| 基準点定数 | 意味 | G_ANCHOR_TOP_RIGHT | 右上 | G_ANCHOR_TOP_LEFT | 左上 | G_ANCHOR_BOTTOM_RIGHT | 右下 | G_ANCHOR_BOTTOM_LEFT | 左下 |
map.addControl(new GMapTypeControl(),
new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(10,10)));
移動禁止- ドラッグによる地図の表示位置の移動を禁止する。
map.disableDragging();
マーカー任意の画像をマーカーにする- 任意の画像URLを与えて関連付けた
GIconオブジェクトを生成する。 imageには、画像URL。iconSizeniには、画像の表示サイズを指定。iconAnchorには、画像の表示基点を指定。(0,0)とすると左上が基点となる。var icon1 = new GIcon();
icon1.image = "./hoge.png";
icon1.iconSize = new GSize(32, 32);
icon1.iconAnchor = new GPoint(+16, +16);
var m0 = new Object();
m0.icon = icon1;
var mark1 = new GMarker(new GLatLng(36.08, 140.21), m0);
map.addOverlay(mark1);
マーカーの位置を取得吹き出し- 第一引数に吹き出し場所。
- 第二引数にメッセージオブジェクトを指定する。
単純なメッセージmap.openInfoWindow(map.getCenter(), document.createTextNode("吹き出し"));
HTMLメッセージマーカーに吹き出しvar mark1 = new GMarker(new GLatLng(36.08, 140.21));
map.addOverlay(mark1);
mark1.openInfoWindow(document.createTextNode("マーカーに吹き出し"));
- 任意画像を使ったマーカーと、この吹き出しとは同居できない？
- 吹き出しを個別に作れば問題ない。
- HTMLメッセージも対応している（
openInfoWindowHtmlを使えばよい）
クリックしたマーカーに吹き出しvar mark1 = new GMarker(new GLatLng(36.08, 140.21));
mark1.info = "クリックされました";
GEvent.addListener(mark1, 'click', function() {
this.openInfoWindow(this.info);
});
map.addOverlay(mark1);
- マーカーのクリックイベントに吹き出し出力処理を記述すればいい。
- 呼出元のマーカーオブジェクトはthisとして参照できる。
住所から緯度経度一つの候補を取得getLatLngメソッドを使用する。- -与えられた住所に対して、一つの候補を返す。
- -第一引数に住所を指定。
- -第二引数にコールバック関数を指定する。
var geocoder = new GClientGeocoder();
// コールバックに名前無し関数を使用
geocoder.getLatLng(address, function(point) {
if (!point) {
alert('not found!');
} else {
var lat = point.lat(); // 緯度
var lng = point.lng(); // 経度
}
} );
複数の候補を取得リサイズ- 地図を流し込むDIVの
WidthとHeightを変更すれば、自動的にリサイズされる。 - ブラウザでの初期表示時、リサイズ時のイベントで、DIVサイズを変更すればok。
- クライアントエリアのサイズ取得はブラウザ間で互換性が無いので注意。
function resize(){
var map_div=document.getElementById("Panel1");
var disp=getDispSize();
map_div.style.width = disp.width + "px";
map_div.style.height= (-50 + disp.height) + "px";
}
function getDispSize() {
if(document.all) {
if(window.opera){
return {width:document.body.clientWidth,height:document.body.clientHeight};
}else{
return {width:document.documentElement.clientWidth,height:document.documentElement.clientHeight};
}
}
// NN
else if(document.layers || document.getElementById){
return {width:window.innerWidth,height:window.innerHeight};
}
}
window.onresize=resize;
ストリートビュー- 何かと話題のストリートビュー。
- 地図とは独立しているので、ストリートビューだけの表示も出来る。
有効な道路の表示基本- ストリートビューを表示するエリアを
<DIV>タグで用意しておく。 - 地図の表示と異なる点として、緯度経度の座標情報に加えて、カメラ方向情報（方角・視点（高さ）・ズーム）が必要。
- カメラ方向情報は、
GPovクラスで扱う。 - ストリートビューの各点の情報をパノラマと呼ぶ。
表示するGStreetviewPanoramaオブジェクトを生成する。- 表示エリア
<DIV ID="dvStView"> の場合。var panorama = new GStreetviewPanorama(document.getElementById("dvStView"));
- -第二引数で初期位置・カメラ方向を指定することが出来る。
var spoint = new GLatLng(posY,posX); // 座標
var spov = {yaw:180,pitch:45,zoom:1}; // カメラ方向
var option = { latlng:spoint, pov:spov };
var panorama = new GStreetviewPanorama(document.getElementById("dvStView"), option);
一時的にON/OFFするGStreetviewPanorama#show() で表示ON。GStreetviewPanorama#hide() で表示OFF。GStreetviewPanorama#isHidden() で現在の表示状態をBOOL値で返す。
データの検索- 座標情報から、その場所のストリートビュー情報が存在するか調べる機能。
GStreetviewClientオブジェクトを生成して利用する。- 指定座標に最も近いパノラマの位置情報(
GLatLng)を返す。 - 隣接するパノラマが無い場合やエラー時は、
nullを返す。 - 戻り値の返し方はコールバック関数の引数として。
- 第一引数は
GLatLng、第二引数はコールバック関数。var client = new GStreetviewClient();
var spoint = new GLatLng(posY,posX);
client.getNearestPanoramaLatLng(spoint, function(latlng) {
alert("座標:" + latlng.lat() + ", " + latlng.lng() );
});
- 指定座標に最も近いパノラマの情報(
GStreetviewData)を返す。 - エラーなどは戻り値
GStreetviewDataオブジェクトのエラーコードとして返す。 - 戻り値の返し方はコールバック関数の引数として。
- 第一引数は
GLatLng、第二引数はコールバック関数。var client = new GStreetviewClient();
var spoint = new GLatLng(posY,posX);
client.getNearestPanorama(spoint, function(data) {
if (data.code == 200) {
var latlng = data.location.latlng;
alert("座標:" + latlng.lat() + ", " + latlng.lng() );
}
});
- 指定されたパノラマの識別子のデータを取得する。
- エラーなどは戻り値
GStreetviewDataオブジェクトのエラーコードとして返す。 - 識別子はパノラマごとに固有で、1つのセッションのライフタイム内では安定。セッション間では変わることが多くある。(2.104以降)
var client = new GStreetviewClient();
client.getPanoramaById("xxxxxxx1234", function(data) {
if (data.code == 200) {
var latlng = data.location.latlng;
alert("座標:" + latlng.lat() + ", " + latlng.lng() );
}
});
カメラ方向の自動計算参考URL素材ASP.NET利用例親戚 |
|