たたみラボ

  • about
  • member
  • r&d
  • blog
  • tatamicast

blog

RSS

マッシュアップ日記（2）Google Mapsを貼ってみる

icon June 26, 2006 12:09 AM by ooi1 このエントリーを含むはてなブックマーク

マッシュアップ日記の2回目は、Google Mapsを貼ってみようと思います。

Google Maps API

まずは、APIキーの取得から

Googleが提供する、サードパーティーのサイトにマウスでぐりぐり動かせるGoogle Mapを貼ったり操作したりするためのAPI。

http://www.google.com/apis/maps/

APIを使うためには、上記ページにある「Sign up for a Google Maps API key」をクリックして、 規約にAgreeすることと使うサイトのURLを登録する必要があります。そうすると、次の画面でAPIキーが表示されます。 このAPIキーは後でメールで送られたりとか一切しませんので、 印刷しておくなり画プリを取っておくなりコピペするなりしておく必要があります。また、 APIキーはhttp://tatamilab.jp/とhttp://www.tatamilab.jp/のようにwwwのあるなしでも区別をしますので、 必ず使用するURLを登録してください。

地図だけのページを作ってみる

出来上がりはこれです。 これを少しずつ解説していきます。

ヘッダ部分の決まりごと

サンプルhtmlの6行目、

<script src="http://maps.google.com/maps?file=api&v=2.x&key=（取得したAPIキー）" type="text/javascript"></script>

これはGoogleMapsを使いますよ、というおまじないです。keyには先ほど取得したAPIキーの文字列をそのまま書きます。 vはAPIのバージョンで、現時点での最新バージョンは2.56ですが、 サンプルのように2.xと書いておくと常にｖ2.xの最新版が読み込まれます。逆に、API Documentのサンプルコードにあるようなv2とだけ書いた場合は、最新版が読み込まれないので注意してください。

Mapの描画をonLoad()で書く

load()というfunctionを作りました。これはMapを表示するためのものです。

function load() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("maparea"));
    map.setCenter(new GLatLng(35.660855,139.775264), 13);
  }
}
  • if (GBrowserIsCompatible()) で、 対応ブラウザの場合のみGoogleMapsを表示するようにします。
  • map = new GMap2(document.getElementById("maparea"))は、 Mapを"maparea"というidを持つdivオブジェクトに表示する世という指示をしていて、 その結果できたmapへの参照をmapという変数に代入しています。
  • map.setCenterでは、Mapの中心座標を定義しています。サンプルでは、たたみラボがある勝どきの緯度経度 （35.660855,139.775264）を渡しています。また13はMapの倍率を指定しています。 Mapの倍率は1~18まで選択できます。

このload()を、htmlが全て読み込まれたあとに実行されるように、bodyタグのonｌoadイベントで呼ぶようにします。 また、メモリリークを防ぐために、別のページを表示しようとしたときにGUnload()を実行するようにします。

<body onload="load()" onunload="GUnload()">

Mapの領域を指定する

さいごに、Mapを表示する領域をdivタグで指定します。divタグのidは何でもいいのですが、new GMap2で指定したidと一致するようにします。サンプルでは"maparea"というidにしています。また、 Mapの寸法はstyleで指定します。サンプルのようにdivタグに直接書いても、別のスタイルシートファイルで定義してもいいです。 

<div id="maparea" style="width: 500px; height: 300px"></div>

Mapにコントロールを追加してみる

Mapに倍率を変更したり、位置を動かすボタンをつけるには、 Mapへの参照であるmapオブジェクトのaddControl()メソッドを使ってGControlオブジェクトを追加します。

  • GLargeMapControl();拡大縮小のスライドバーと位置移動の十字ボタン
  • GScaleControl();距離目盛
  • GMapTypeControl();地図モードと衛星写真モードの切り替えボタン
  • GSmallMapControl();スライドバーのない、拡大縮小と位置移動のボタン
  • GSmallZoomControl();拡大縮小ボタンのみ

次回

つぎはリクルートWEBサービスの結果をGoogle Mapsにプロットしてみます。

 

バックナンバー

tags：          

ページトップへ

(C) RECRUIT MEDIA COMMUNICATIONS CO., LTD.