Google Maps API

Maps API
- デベロッパーガイド
- コードサンプル:
  - デモギャラリー
  - 例
- リファレンス

静的 Maps API
- デベロッパーガイド

Mapplets API
- ホームページ
- ドキュメント

地図の基本

はじめに
Google マップの「Hello, World」
緯度と経度
地図の属性
地図の操作
情報ウィンドウ

はじめに

すべての Google Maps API アプリケーションにおける基本要素は「地図」そのものです。このドキュメントでは、基盤となる GMap2 オブジェクトの使用方法と、地図の操作の基本事項について説明します。

Google マップの「Hello, World」

Google Maps API について学び始めるには、簡単な例を参照するのが最もやさしい方法です。次のウェブページでは、中心がカリフォルニア州パロアルトにある 500×300 ピクセルの地図が表示されます。

<!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&amp;v=2&amp;key=abcdefg"
            type="text/javascript"></script>
    <script type="text/javascript">

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

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

この例を見たり、ダウンロードして編集したり試したりすることができます。ただし、ファイル内のキーは実際の Maps API キーと置き換える必要があります (特定のディレクトリに対してキーを登録すると、そのキーがすべてのサブディレクトリにも適用されます)。

この簡単な例でも、次の5つの点で注意する必要があります。

script タグを使用して Maps API JavaScript をインクルードします。
"map_canvas" という名前の div 要素を作成して地図を格納します。
"map" オブジェクトを作成する JavaScript 関数を記述します。
地図の中央に指定された地点を表示します。
body タグの onLoad イベントで地図オブジェクトを初期化します。

これらの手順を以下で説明します。

Google Maps API を読み込む

<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
        type="text/javascript">
</script>

http://maps.google.com/maps?file=api&v=2&key=abcdefg という URL は、JavaScript ファイルの位置を示しており、このファイルで Google Maps API を使用するために必要なすべての記号と定義をインクルードします。API の登録時に取得したキーを使用して、この URL を指定する script タグをページに含める必要があります。この例ではこのキーを「abcdefg」としています。"

地図の DOM 要素

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

地図をウェブページに表示するには、そのための領域を用意する必要があります。これには、ブラウザのドキュメントオブジェクトモデル (DOM) 内で名前付きの div 要素を作成し、この要素への参照を取得するのが一般的です。

上の例では "map_canvas" という名前の div を定義し、style 属性でそのサイズを設定しています。コンストラクタ内で GMapOptions を使用して明示的に地図のサイズを指定しない場合は、地図のサイズは黙示的にコンテナのサイズとなります。

`GMap2` - 基本オブジェクト

var map = new GMap2(document.getElementById("map_canvas"));

地図を表す JavaScript クラスは GMap2 クラスです。このクラスのオブジェクトは、1 ページに 1 つの地図を定義します(このクラスでは、複数のインスタンスを作成し、各オブジェクトでページ上の個々の地図を定義できます)。JavaScript の new 演算子を使用して、このクラスの新しいインスタンスを作成します。

新しい地図インスタンスを作成する場合は、その地図のコンテナとしてページ内で DOM ノード (通常は div 要素) を指定します。HTML ノードは JavaScript の document オブジェクトの子要素となります。また、document.getElementById() メソッドによってこの要素へのリファレンスを取得します。

このコードでは map という名前の変数を定義し、その変数を新しい GMap2 オブジェクトに割り当てます。関数 GMap2() は「コンストラクタ」と呼ばれます。その定義を以下に示します (わかりやすくするために Google Maps API リファレンスの内容を簡略化しています)。

コンストラクタ	説明
GMap2(container, opts?)	指定された HTML `container` (通常は `DIV` 要素) の中に新しい地図を作成します。`opts` パラメータでタイプ `GMap2Options` のオプションのパラメータを渡すこともできます。

JavaScript はタイプ指定が厳格ではない言語のため、コンストラクタ内にオプションのパラメータを渡す必要はなく、ここでも行いません。

地図を初期化

  map.setCenter(new GLatLng(37.4419, -122.1419), 13);

GMap2 コンストラクタを使用して地図を作成したら、もう1つ必要なことがあります。それは初期化することです。地図の setCenter() メソッドを使用することで初期化できます。setCenter() メソッドには GLatLng 座標とズームレベルを与える必要があります。このメソッドは、地図自体のその他の属性の設定など、地図上で他の操作を行う前に送信する必要があります。

地図を読み込む

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

HTML ページをレンダリングするときには、ドキュメントオブジェクトモデル (DOM) を作成し、外部のすべての画像とスクリプトを取得して、document オブジェクトに組み込みます。ページの読み込みが完了した後に、自分の地図をそのページだけに配置されるようにするには、HTML ページの <body> 要素が onload イベントを受信したときに、 GMap2 オブジェクトを作成する関数を実行するだけです。これにより、予測できない動作を防ぎ、地図を描画する方法とタイミングをより正確にコントロールできます。

onload 属性は、イベントハンドラの1つの例です。Google Maps API には、状態の変化を判定するために「リッスン」できるイベントもいくつかあります。詳細については、マップイベントとイベントリスナの説明を参照してください。

GUnload() 関数はメモリリークを防ぐために設計されたユーティリティ関数です。

緯度と経度

地図の用意ができたので、今度は地図上で位置を参照する方法が必要です。GLatLng オブジェクトは、このようなメカニズムを Google Maps API 内で提供します。地図作成の慣例にしたがって、{ <経度>, <緯度> } の順序でパラメータを渡して GLatLng オブジェクトを作成します。

  var myGeographicCoordinates = new GLatLng(myLatitude, myLongitude)

注:「住所」を地理的位置に変換する処理を「ジオコーディング」と呼びます。詳細は Google Maps API のサービスのセクションで説明します。

このオブジェクトは、簡単に地理的位置を参照するために役立つだけでなく、オブジェクトの地理的な境界を定義するためにも役立ちます。たとえば、地図はビューポートと呼ばれる範囲内に世界全体の現在の「ウィンドウ」を表示します。このビューポートは、その四角形の角の地点によって定義できます。GLatLngBounds オブジェクトは、境界ボックスの南西と北東の角を表す 2 つの GLatLng オブジェクトを使用して四角形の範囲を定義することで、この機能を提供します。

GLatLng オブジェクトは、Google Maps API においてさまざまな用途があります。たとえば、GMarker オブジェクトはそのコンストラクタ内で GLatLng を取り、地図上の指定された地理的位置にマーカー「オーバーレイ」を配置します。

次の例では、getBounds() を使用して現在のビューポートを返し、その後でそれらの境界内の地図上にランダムに 10 個のマーカーを配置します。

function initialize() {
  var map = new GMap2(document.getElementById("map_canvas"));
  map.setCenter(new GLatLng(37.4419, -122.1419), 13);
 
  // Add 10 markers to the map at random locations
  var bounds = map.getBounds();
  var southWest = bounds.getSouthWest();
  var northEast = bounds.getNorthEast();
  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();
  for (var i = 0; i < 10; i++) {
    var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
        southWest.lng() + lngSpan * Math.random());
    map.addOverlay(new GMarker(point));
  }
}

例を表示 (map-markers.html)

注:GMarker オブジェクトの詳細については、オーバーレイのセクションを参照してください。

地図の属性

デフォルトでは、地図は標準の「塗りつぶされた」タイルを使用して Google Maps API 内に表示されます。ただし、Google Maps API では他のマップタイプもサポートされています。標準のマップタイプは次のとおりです。

G_NORMAL_MAP - デフォルトビュー
G_SATELLITE_MAP - Google Earth の航空写真を表示
G_HYBRID_MAP - 通常のビューと航空写真の混合表示
G_DEFAULT_MAP_TYPES - これらの 3 タイプすべて。反復処理に役立ちます

GMap2 オブジェクトの setMapType() メソッドを使用してマップタイプを設定できます。たとえば、次のコードでは Google Earth の航空写真を使用するように地図を設定します。

  var map = new GMap2(document.getElementById("map_canvas"));
  map.setMapType(G_SATELLITE_MAP);

地図には、確認目的に役立ついくつかの属性もあります。たとえば、現在のビューポートの範囲を知るには、GMap2 オブジェクトの getBounds() メソッドを使用して GLatLngBounds の値を返します。

各地図には現在のビューの解像度を定義する「ズームレベル」もあります。通常のマップビュー内では、0(最も低いズームレベルで、1 つの地図で世界全体を表示可能) ～ 19(最も高いズームレベルで、個々の建物まで表示可能) のズームレベルが使用可能です。地球上の地域によって地理データの詳細度が異なるため、ズームレベルは表示している地域に応じて異なります。航空写真では最高でレベル 20 までのズームレベルを使用できます。

地図で使用している現在のズームレベルを取得するには、GMap2 オブジェクトの getZoom() メソッドを使用します。

ズームレベル、マップタイル、独自のカスタムマップタイプの作成方法などについては、タイルオーバーレイのセクションを参照してください。

地図の操作

GMap2 オブジェクトの準備ができたので、ここではそれを操作します。基本的なマップオブジェクトの外観と動作は、Google マップのウェブサイトで地図を操作する場合と似ており、多くの組み込みの動作が用意されています。また、GMap2 オブジェクトでは、マップオブジェクト自体の動作を変更するいくつかの設定メソッドを使用できます。

マップオブジェクトは、http://maps.google.com と同じようにユーザーの操作に応答する方向でデフォルト設定されています。この動作は、いくつかのユーティリティメソッドを使用して変更できます。たとえば、GMap2.disableDragging() メソッドは地図をクリックして新しい場所にドラッグする機能を無効にします。

地図の操作はプログラムによって行うこともできます。GMap2オブジェクトは、地図の状態を直接変更するいくつかのメソッドをサポートしています。たとえば setCenter() メソッド、panTo メソッド、および zoomIn() メソッドは、ユーザーによる操作ではなくプログラムによって地図を操作します。

次の例では地図を表示し、2 秒停止してから新しい中心点へ移動します。panTo メソッドは、指定した地点を地図の中央に表示します。指定した地点が地図上に表示されている場所の場合、地図は速やかにその地点まで移動します。それ以外の場合、地図はその地点にジャンプします。

var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
window.setTimeout(function() {
  map.panTo(new GLatLng(37.4569, -122.1569));
}, 1000);

例を表示 (map-animate.html)

さらに複雑な操作は Maps API イベントで実現します。

情報ウィンドウ

Google Maps API 内の各地図はタイプ GInfoWindow の「情報ウィンドウ」を 1 つ表示できます。情報ウィンドウは、地図上に表示されるフローティングウィンドウであり、その中に HTML コンテンツを表示します。情報ウィンドウは漫画の吹き出しに似ています。内容の部分と先が細くなった部分からなり、その先端が地図上の指定位置を指します。Google マップでマーカーをクリックすると、実際の情報ウィンドウを表示できます。

GInfoWindow オブジェクトにはコンストラクタはありません。情報ウィンドウは自動で作成され、地図の作成時にその地図に付加されます。特定の 1 つの地図に対して同時に複数の情報ウィンドウを表示することはできませんが、情報ウィンドウを移動して、必要に応じてその内容を変更することができます。

GMap2 オブジェクトでは、引数に地点と HTML DOM 要素を取る openInfoWindow()メソッドを使用することができます。HTML DOM 要素は情報ウィンドウのコンテナに追加され、情報ウィンドウのウィンドウヒントは指定された地点に関連付けられます。

GMap2 の openInfoWindowHtml() メソッドは似ていますが、2 番目の引数に DOM 要素ではなく HTML 文字列を取ります。

情報ウィンドウを作成するには、表示する位置と DOM 要素を渡して openInfoWindow メソッドを呼び出します。次のサンプルコードでは、地図の中心に固定された情報ウィンドウに「Hello, world」という簡単なメッセージを表示します。

var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.openInfoWindow(map.getCenter(),
                   document.createTextNode("Hello, World"));

例を表示 (map-infowindow.html)

情報ウィンドウの詳細なドキュメントについては、Google Maps API リファレンスを参照してください。


例: "ajax apis" または "open source"

Google Maps API

Maps API

コード サンプル:

静的 Maps API

Mapplets API