戻る
Gen ;)

Google Maps 講習会 春休みバージョン V2改訂版

Google Maps APIバージョン2用に改訂しました。
旧APIバージョン1用のチュートリアルはこちらに残っています。

日時
3月22日（水）13:00-16:30（3・4限連続）
内容
この講習を終えれば、Google Mapsを自分のホームページに設置して地図上に簡単なコンテンツを表示できるようになります。
プログラミングの知識は、あればとても役立ちますが、なくても構いません。
簡単なページを作れる程度のHTMLについての知識があると良いです。
詳しい内容については、当日受講生の様子を見て調整します。
会場
e15
備考
ノートパソコンを持参してください。
メディアセンターの貸し出しPCでも構いません。

目標

Googleアカウントを作成する

すでに持っている方は必要ありませんが、まだ持っていない方は新しく作ってください。
https://www.google.com/accounts/NewAccount

テンプレートを用意する

下の枠内のコードをコピーして、メモ帳に貼り付けます。 

<!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" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <style type="text/css">
    v\:* {
      behavior:url(#default#VML);
    }
    </style>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=あなたのAPIキー（あとで置き換えます）"
            type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

Google Maps APIキーを取得する

このページにアクセスして、設置するサイトのURLを入力してボタンを押します。
http://www.google.com/apis/maps/signup.html

API key

上の絵の赤い枠の部分を選択し、Ctrl+Cでコピーします。これがあなたのAPIキーです。
APIキーは地図を設置するサイトごとに必要です。
そして、さきほどメモ帳に貼り付けたコードのうち赤字で書かれていた部分を、このAPIキーで置き換えてください。
出来上がったら index.html というファイル名で保存します。

それをウェブサイトにアップロードし、ブラウザで開いてみて下さい。
うまく表示されましたでしょうか？

First map

衛星写真を表示する

Google Mapsにはコントロールという概念があります。
いま作った地図には GSmallMapControl が付いています。
コントロールを追加していくことで地図の機能を拡張していくわけです。

GLargeMapControl GSmallMapControl GSmallZoomControl GMapTypeControl GScaleControl GOverviewMapControl
大きなパン／ズームコントロール
GLargeMapControl 		小さなパン／ズームコントロール
GSmallMapControl 		小さなズームコントロール。パンはなし。
GSmallZoomControl 		地図／衛星／デュアルの切り替えボタン
日本語の場合
GMapTypeControl (Japanese)
英語の場合
GMapTypeControl
ブラウザ側でGoogleを日本語で表示するように設定されている場合（デフォルト）は日本語のボタンが表示されます。
逆に英語圏の人が使う場合は下の絵のように英語でボタンが表示されます。 		GScaleControl GScaleControl
注：まだ実験的機能らしく、GControlPosition を使っても位置の調整がうまくいきません（2006年4月17日）。

これらのコントロールは次の赤字のコードを書くことで追加できます。 

    var map = new GMap2(document.getElementById("map"));
    map.addControl(new コントロール名());
    map.setCenter(new GLatLng(37.4419, -122.1419), 13);

コントロール名 の部分は上のいずれかに置き換えてください。例えばこういう感じで、好きなだけ追加できます。

    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());

デフォルトの表示位置とズームを決める

さきほどのマップではページを読み込んだときにカリフォルニア州のPalo Altoにズームします。
とりあえず東京に変えてみましょう。
目標物の緯度経度はこのへんで確認します。
緯度経度をメモっておいてください。 そしたら次は下の赤字の部分にそれを埋め込みます。 

    var map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.setCenter(new GLatLng(緯度, 経度), 13);

GLatLng の Latは緯度（latitude）、Lngは経度（longitude）なので、この順番と覚えましょう。
経度、緯度とも単位は度で、南緯や西経はマイナスの数値にします。
また、ズームはここで指定します。 

    var map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.setCenter(new GLatLng(37.4419, -122.1419), ズームレベル);

ズームレベルは、GLargeMapControl の一番下（縮小）の目盛りから0、1、2…と数えていきます。
APIバージョン1ではズームレベル「0」が一番拡大したときでしたが、こんどは逆です。
バージョン1から更新する場合はこのように求めます。
<バージョン2でのズームレベル> = 17 - <バージョン1でのズームレベル>

GLargeMapControl

この絵だとズームレベル4です。
例えば東京タワーに合わせてみましょう。 

    map.setCenter(new GLatLng(35.658604, 139.745407), 14);

東京タワー

OKですね。

ポイントを表示する

次の赤字のコードを追加します。 

    <script type="text/javascript">
    //<![CDATA[

    function createMarker(point, icon, html) {
      var marker = new GMarker(point, icon);
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(35.658604, 139.745407), 14);
        var marker1 = createMarker(new GLatLng(35.658604, 139.745407), null, "Hello, World!");
        map.addOverlay(marker1);
      }
    }

日本語を使う

HTMLの <HEAD> と </HEAD> の間に次の meta タグを追加してください。 

  <meta http-equiv="Content-Type" content="text/html; charset=shift_jis">

赤字の shift_jis の部分はあなたの環境に合わせて次のいずれかを指定してください。

WindowsやMacをお使いなら shift_jis がおすすめです。

アイコンを変える

赤字のコードを追加します。 


    var icon = new GIcon();
    icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
    icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
    icon.iconSize = new GSize(12, 20);
    icon.shadowSize = new GSize(22, 20);
    icon.iconAnchor = new GPoint(6, 20);
    icon.infoWindowAnchor = new GPoint(5, 1);

    var map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(35.658604, 139.745407), 14);
    
    var marker1 = createMarker(new GLatLng(35.658604, 139.745407), icon, "Hello, World!");
    map.addOverlay(marker1);

アイコンを追加するコード createMarker() は次のように使います。
青い字の marker1 が2つとも同じ文字になっていることに注意してください。 

    var marker1 = createMarker(new GLatLng(緯度, 経度), アイコン, "吹き出し中に表示するHTML");
    map.addOverlay(marker1);

アイコンを定義するコードの意味は次のようになっています。 

    var icon = new GIcon();
    icon.image = "アイコン画像のURL";
    icon.shadow = "アイコンの影画像のURL";
    icon.iconSize = new GSize(アイコン画像の幅, 高さ);
    icon.shadowSize = new GSize(アイコン影画像の幅, 高さ);
    icon.iconAnchor = new GPoint(アイコンの中心点のx位置, y位置);
    icon.infoWindowAnchor = new GPoint(画像中で吹き出しが表示されるx位置, y位置);

アイコンを複数追加する

さきほど追加した var icon = new GIcon(); の行から icon.infoWindowAnchor = new GPoint(5, 1); の行までを次の赤字のコードに変更します。 


    var icon = new GIcon();
    icon.image = "http://ecogis.sfc.keio.ac.jp/developers/gmaps/weather.cgi?place=tokyo&day=1";
    icon.iconSize = new GSize(30, 20);
    icon.iconAnchor = new GPoint(15, 10);
    icon.infoWindowAnchor = new GPoint(15, 10);

そして map.addOverlay(marker1); の後に3行ずつ追加していきます。
その際 marker2、marker3 と、次々別の名前で作っていくといいと思います。 

    var marker1 = createMarker(new GLatLng(35.658604, 139.745407), icon, "");
    map.addOverlay(marker1);

    icon.image = "http://ecogis.sfc.keio.ac.jp/developers/gmaps/weather.cgi?place=nagoya&day=1";
    var marker2 = createMarker(new GLatLng(35, 140), icon, "");
    map.addOverlay(marker2);

    icon.image = "http://ecogis.sfc.keio.ac.jp/developers/gmaps/weather.cgi?place=osaka&day=1";
    var marker3 = createMarker(new GLatLng(36, 139), icon, "");
    map.addOverlay(marker3);

お天気のアイコンを表示させてみましょう。
http://ecogis.sfc.keio.ac.jp/developers/gmaps/weather.cgi?place=都市名&day=日にち
このURLで、http://tenki.jp を基として全国各都市の今日／明日／明後日の天気アイコンを得られます。

日にちは、次のように指定します。
コードに入力する日にち 意味
1 今日
2 明日
3 明後日

都市名には次の都市を設定できます。

コードに入力する都市名 日本語名
sapporo 札幌
kushiro 釧路
aomori 青森
sendai 仙台
niigata 新潟
tokyo 東京
nagano 長野
nagoya 名古屋
kanazawa 金沢
osaka 大阪
hiroshima 広島
matsue 松江
kochi 高知
fukuoka 福岡
kagoshima 鹿児島
naha 那覇

例:
http://ecogis.sfc.keio.ac.jp/developers/gmaps/weather.cgi?place=sapporo&day=1
これで札幌の今日のお天気アイコンが取れます。

http://ecogis.sfc.keio.ac.jp/developers/gmaps/weather.cgi?place=sapporo&day=2
札幌の明日の天気

http://ecogis.sfc.keio.ac.jp/developers/gmaps/weather.cgi?place=tokyo&day=2
東京の明日の天気

これをカスタマイズしてお天気マップを作ってみましょう。

ラインデータを表示する

スクリプトに追加するコードはこれです。 

    var polyline = new GPolyline([
      new GLatLng(37.4419, -122.1419),
      new GLatLng(37.4519, -122.1419),
      new GLatLng(37.4519, -122.1519)
    ], "#ff0000", 10);
    map.addOverlay(polyline);

このうち #ff0000 は線の色で、10 は線の幅です。
new GLatLng(...),のところで線分の頂点を指定します。
new GLatLng(...),の行はいくらでも増やせます。

エラーが起こったとき

Firefoxの「ツール」→「JavaScript コンソール」を開いてみてください。

参考ページ

2006年4月18日
飯塚直
s03048ni@sfc.keio.ac.jp