Google Maps API

1 Google Maps API キーの取得
2 例
3 中心の指定
4 移動/縮尺ボタンをつける
5 マップ/サテライト切り替えボタンをつける
6 右下の小さい地図表示
7 地図タイプ指定
8 縮尺コントロール表示
9 GoogleBarを有効に
10 ズーム有効
11 ズーム時に滑らかにする
12 キーボード操作を有効にする

Google Maps API キーの取得

http://code.google.com/apis/maps/index.html から、「Sign up for a Google Maps API key.」を選択。
http://code.google.com/apis/maps/signup.html このページに行く。
利用規約に同意(I have read and agree with the terms and conditions の横にチェック)
My web site URL: のテキストボックスに利用したいサイトのURLを入力。
※ https には対応していないので、http://～～で入力すること。(2008/08 時点)
Generate API Key ボタンを押す。
キーが記述されたページが表示される。
このページをテキストとか画像とかなんでもいいので保存しておくこと。(何度キーを発行してもいいが念のため)

例

<!DOCTYPE html PUBLIC "-//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" xml:lang="ja" lang="ja">
<head>
    <title></title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA3b1U0k8l3G5ZDeircAgnoRTMHNshl39s6ir4G8h5vEq_YHl9xRQWvk8oULFH6_YkkutsT0UtMijfnw" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id="mapArea" style="width:500px; height:500px"></div>
    <script type="text/javascript">
    if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("mapArea"));
      map.setCenter(new GLatLng(43.045335, 141.398845), 13);
    }
    </script>
  </body>
</html>

※キー部分はこのサイトのドメイン用のキーになっています。

↓上記HTMLが記述してあるページ
http://labs.bizright.co.jp/wiki/googleMap/googleMapTest.html

中心の指定

map.setCenter(new GLatLng(緯度, 経度), ズーム率);

移動/縮尺ボタンをつける

map.addControl(new GSmallMapControl());

map.addControl(new GLargeMapControl());

マップ/サテライト切り替えボタンをつける

map.addControl(new GMapTypeControl());

右下の小さい地図表示

map.addControl(new GOverviewMapControl());

地図タイプ指定

地図

map.setMapType(G_NORMAL_MAP);

航空写真

map.setMapType(G_SATELLITE_MAP);

地図＋写真

map.setMapType(G_HYBRID_MAP);

地形

map.addMapType(G_PHYSICAL_MAP);

縮尺コントロール表示

map.addControl(new GScaleControl());

GoogleBarを有効に

map.enableGoogleBar();

ズーム有効

ダブルクリックでズームを有効

map.enableDoubleClickZoom();

ホイールでズームを有効

map.enableScrollWheelZoom();

ズーム時に滑らかにする

map.enableContinuousZoom();

キーボード操作を有効にする

new GKeyboardHandler(map);

この項目は執筆中です。

"http://labs.bizright.co.jp/wiki/index.php/Google_Maps_API" より作成

カテゴリ: 書きかけの節のある項目 | 技術情報

表示