marunomaruno-memo

marunomaruno-memo

Google Maps API

2009年01月20日 | Weblog
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
---
<!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));


以上