2009-01-20
Google Maps API
================================================================================
Google Maps API に登録して、使ってみた。
■登録方法
Google Maps API
http://code.google.com/intl/ja/apis/maps/
を参考に、ユーザー登録し、Google Maps API キーを取得する。
■サンプル
Google Maps API のドキュメント
http://code.google.com/intl/ja/apis/maps/documentation/
を参考に、マップを表示(マーカー、マップコントロールなどもあわせて表示)するだけの
サンプル。なお、基準は東京タワー(東京都港区芝公園4‐2‐8)。
□sample.html
□ Google Maps API を読み込む
つぎのようにして、 取得した Google Maps API キー値 を指定して、JavaScript を読み
込む。
Google Maps API は、Google AJAX API と完全<script
src="http://maps.google.com/maps?file=api&v=2&key=取得した Google
Maps API キー値"
type="text/javascript"></script>
<script type="text/javascript">
□ function initialize()
<body onload="initialize()" onunload="GUnload()">
body タグに onload 属性をつけて、このページが呼び出されたときにはこの initialize
() 関数を実行するように設定する。
□ if (GBrowserIsCompatible())
ブラウザーが Google Maps API と互換性があるかどうかをチェックする。
□ マップを表示する領域の取得と設定
通常は、div タグを使って、マップを表示する領域を定義する。
これは、getElementById() 関数によって、DOM 要素として取得し、GMap2 オブジェクト
を作るコンストラクターに引き渡す。
var map = new GMap2(document.getElementById("map_canvas"));
<div id="map_canvas" style="width: 500px; height: 300px"></div>
□ 経度と緯度、ズームレベル(0-19)の設定
GLatLng オブジェクトを、経度と緯度を渡して作る。
これを、map オブジェクトに setCenter() メソッドを使って設定する。あわせて、ズー
ムレベルも設定できる。
var point = new GLatLng(35.658634, 139.745411); // 東京タワー
map.setCenter(point, 15);
□ 地図の属性(地図、航空写真)
setMapTypes メソッドを使って設定する。
map.setMapType(G_NORMAL_MAP); // 航空写真
標準のマップ・タイプは以下のとおり。
---
G_NORMAL_MAP - デフォルト ビュー
G_SATELLITE_MAP - Google Earth の航空写真を表示
G_HYBRID_MAP - 通常のビューと航空写真の混合表示
---
□ 情報ウィンドウの表示
地図上にふきだし(情報ウィンドウ)を持てる。
map.openInfoWindow(map.getCenter(), document.createTextNode("東京タワー"));
□ マップコントロールの表示
マップ上に、表示形式を変えたり、ズームを制御するためのコントロールを出せる。
addControl メソッドを使って、マップオブジェクトに追加する。
map.addControl(new GSmallMapControl());
つぎのコントロールがある。
---
GLargeMapControl - Google マップ上で使用する大きなドラッグ/ズームコントロール。
デフォルトでは地図の左上に表示されます。
GSmallMapControl - Google マップ上で使用する小さなドラッグ/ズームコントロール。
デフォルトでは地図の左上に表示されます。
GSmallZoomControl - ドラッグ コントロールがない小さなズーム コントロール。Google
マップで、車のルートの順序を示す小地図のブローアップ ウィン
ドウ内で使用されています。
GScaleControl - 地図の縮尺
GMapTypeControl - マップ タイプ (地図や航空写真など) をユーザーが切り替えるた
めのボタン
GHierarchicalMapTypeControl - 多くのマップ タイプ セレクタを配置するための入れ子
になったボタンとメニュー アイテム
GOverviewMapControl - 画面の隅にある最小化可能な全体図
---
□ マーカー
マップ上にマーカーを置ける。
addOverlay メソッドを使って、マーカーをマップオブジェクトに追加する。
map.addOverlay(new GMarker(point));
以上
Google Maps API
================================================================================
Google Maps API に登録して、使ってみた。
■登録方法
Google Maps API
http://code.google.com/intl/ja/apis/maps/
を参考に、ユーザー登録し、Google Maps API キーを取得する。
■サンプル
Google Maps API のドキュメント
http://code.google.com/intl/ja/apis/maps/documentation/
を参考に、マップを表示(マーカー、マップコントロールなどもあわせて表示)するだけの
サンプル。なお、基準は東京タワー(東京都港区芝公園4‐2‐8)。
□sample.html
---
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Maps JavaScript API の例</title>
<script
src="http://maps.google.com/maps?file=api&v=2&key=取得した Google
Maps API キー値"
type="text/javascript"></script>
<script type="text/javascript"><!--
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
// 経度と緯度、ズームレベル(0-19)
var point = new GLatLng(35.658634, 139.745411); // 東京タワー
map.setCenter(point, 15);
// 地図の属性(地図、航空写真)
map.setMapType(G_NORMAL_MAP); // 航空写真
// 情報ウィンドウの表示
map.openInfoWindow(map.getCenter(),
document.createTextNode("東京タワー"));
// マップコントロールの表示
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
// マーカー
map.addOverlay(new GMarker(point));
}
}
--></script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
---□ Google Maps API を読み込む
つぎのようにして、 取得した Google Maps API キー値 を指定して、JavaScript を読み
込む。
Google Maps API は、Google AJAX API と完全<script
src="http://maps.google.com/maps?file=api&v=2&key=取得した Google
Maps API キー値"
type="text/javascript"></script>
<script type="text/javascript">
□ function initialize()
<body onload="initialize()" onunload="GUnload()">
body タグに onload 属性をつけて、このページが呼び出されたときにはこの initialize
() 関数を実行するように設定する。
□ if (GBrowserIsCompatible())
ブラウザーが Google Maps API と互換性があるかどうかをチェックする。
□ マップを表示する領域の取得と設定
通常は、div タグを使って、マップを表示する領域を定義する。
これは、getElementById() 関数によって、DOM 要素として取得し、GMap2 オブジェクト
を作るコンストラクターに引き渡す。
var map = new GMap2(document.getElementById("map_canvas"));
<div id="map_canvas" style="width: 500px; height: 300px"></div>
□ 経度と緯度、ズームレベル(0-19)の設定
GLatLng オブジェクトを、経度と緯度を渡して作る。
これを、map オブジェクトに setCenter() メソッドを使って設定する。あわせて、ズー
ムレベルも設定できる。
var point = new GLatLng(35.658634, 139.745411); // 東京タワー
map.setCenter(point, 15);
□ 地図の属性(地図、航空写真)
setMapTypes メソッドを使って設定する。
map.setMapType(G_NORMAL_MAP); // 航空写真
標準のマップ・タイプは以下のとおり。
---
G_NORMAL_MAP - デフォルト ビュー
G_SATELLITE_MAP - Google Earth の航空写真を表示
G_HYBRID_MAP - 通常のビューと航空写真の混合表示
---
□ 情報ウィンドウの表示
地図上にふきだし(情報ウィンドウ)を持てる。
map.openInfoWindow(map.getCenter(), document.createTextNode("東京タワー"));
□ マップコントロールの表示
マップ上に、表示形式を変えたり、ズームを制御するためのコントロールを出せる。
addControl メソッドを使って、マップオブジェクトに追加する。
map.addControl(new GSmallMapControl());
つぎのコントロールがある。
---
GLargeMapControl - Google マップ上で使用する大きなドラッグ/ズームコントロール。
デフォルトでは地図の左上に表示されます。
GSmallMapControl - Google マップ上で使用する小さなドラッグ/ズームコントロール。
デフォルトでは地図の左上に表示されます。
GSmallZoomControl - ドラッグ コントロールがない小さなズーム コントロール。Google
マップで、車のルートの順序を示す小地図のブローアップ ウィン
ドウ内で使用されています。
GScaleControl - 地図の縮尺
GMapTypeControl - マップ タイプ (地図や航空写真など) をユーザーが切り替えるた
めのボタン
GHierarchicalMapTypeControl - 多くのマップ タイプ セレクタを配置するための入れ子
になったボタンとメニュー アイテム
GOverviewMapControl - 画面の隅にある最小化可能な全体図
---
□ マーカー
マップ上にマーカーを置ける。
addOverlay メソッドを使って、マーカーをマップオブジェクトに追加する。
map.addOverlay(new GMarker(point));
以上
