最近の更新履歴

Google Maps API Version3 チュートリアル

イントロダクション

どのGoogle Maps Version3 APIアプリケーションの中でも基本となる要素は "map" そのものです。この文書は 基本的なgoogle.maps.Map オブジェクトと地図操作の基本 の使い方について説明します。 (もしあなたがVersion2 チュートリアルを理解しているなら、多くが同じように見えるでしょう。しかしながら、これらは少し異なりますので、このドキュメントを読んでください。)

Google Maps Version 3 の "Hello, World"

Google Maps APIについて最も簡単に学び始める方法は、簡単な例を見ることです。下記はオーストラリアのニューサウスウェルズ州、シドニーを中心にwebページ上に地図を表示します。

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

この分かりやすい例でさえ、いくつか注意する点があります。

  1. script タグを使って、Maps API JavaScript を読込みます。
  2. 地図 を 表示するための div 要素を "map_canvas" という名前で作成します。
  3. たくさんの地図プロパティの保持するための JavaScript オブジェクト定数を作成します。
  4. "map" オブジェクトを作成するためのJavaScript関数を書きます。
  5. body タグの onload イベントで、地図オブジェクトを初期化します。

これらのステップについて下記に説明します。

Google Maps APIの読み込み

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script>

http://maps.google.com/maps/api/js は、Google Maps API version3 を使うのに必要な全てのシンボルを読み込むJavaScript ファイルを示しています。あなたのページはこのURLへの script タグを含まなければなりません。

このヘッダーの中の <meta> タグの指定は、地図はフルスクリーンで表示されるべきで、ユーザーによってリサイズされるべきではない" ことを意味しています。(Developing for Mobile Devices追加情報を参照してください)

※注：sensor パラメータは必ず指示する必要があり、これはアプリケーションはユーザーの位置を決めるのに(GPSのような)センサーを使うかどうかを示します。この例では変数"set_to_true_or_false"を強調するためにそのまま書いてあります。あなたは必ず true または false のどちらかの値をセットしなければなりません。

Map DOM 要素

<div id="map_canvas" style="width: 100%; height: 100%"></div>

地図をwebページ上に表示するために、そのための場所を確保しなければなりません。普通、名前付きの div エレメントを使って作成し、 ブラウザのドキュメント・オブジェクト・モデル(DOM)エレメントの参照を取得します。

上記の例では <div> に "map_canvas" と名前をつけて、 サイズを style属性 を使って指定しています。
※注：このサイズに"100%"をセットすると、モバイルデバイス上では画面全体にフィットするように拡張されます。あなたはブラウザのスクリーンサイズと余白(Padding)を調整する必要があるかもしれません。
※注：地図は常にサイズをコンテナ要素から取得するため、 あなたは常に明示的に <div> にサイズを設定しなければなりません。

Map オプション

var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
  zoom: 8,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

地図の初期化は、最初に Map options オブジェクトと作成し、地図の初期化変数に含ませます。このオブジェクトは構築されず、代わりにオブジェクト定数が作られます。地図の中心位置を指定したいので、 latlng の値も設定し、地図のオプションの中に指定します。Because we want to center the map on a specific point, we also create a latlng value to hold this location and pass this into the map's options. 位置の指定については、下記の 経度と緯度 をご覧ください。.

初期ズーム値 と mapTypeId を google.maps.MapTypeId.ROADMAP に設定します。以下のマップタイプをサポートしています。

  • ROADMAP は、通常の表示で、2DのGoogle Mapsを表示します。
  • SATELLITE は、鮮明な航空写真のタイルを表示します。
  • HYBRID は、鮮明な航空写真のタイルに、有名な地物(道路や街の名前など）重ねて表示します。
  • TERRAIN は、山や川などの地形的特徴を持つ地図を表示します。

Google Maps version2 APIとは異なり、これらはデフォルトのマップタイプではありません。あなたは必ず地図の初期化に適切なマップタイプを指定しなければなりません。

google.maps.Map - 基本的なオブジェクト

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

地図を表示する JavaScriptクラス は、 Map クラスです。このクラスのオブジェクトはページ上に単に地図を定義します。 (あなたはこのクラスを1つ以上のインスタンスを作成することができ、それぞれのオブジェクトは別々の地図を定義します。) JavaScriptの new 演算子を使ってこのクラスの新しいインスタンスを作成します。

新しい地図のインスタンスを作成するとき、ページ内に地図を表示するための <div> HTML要素を指定します。HTML ノードはJavaScriptのdocument オブジェクトの子要素で、document.getElementById() メソッドを使って、この要素のリファレンスを取得します。 

このコードは変数(変数名：map)を定義して、新しい Map オブジェクトに関連付け、myOptions オブジェクト定数の中で定義されたオプションを渡しています。これらのオプションは地図の特性を初期化するのに使用されます。Map() 関数は コンストラクタ として知られ、以下のように定義されています。

コンストラクタ 説明
google.maps.Map( opts?) opts パラメータの中にオプションのパラメータを指定して、新しい地図を作成します

地図の読み込み

  <body onload="initialize()">

ページが描画される間、ドキュメント・オブジェクト・モデル(DOM)は構築され、どの外部の画像やスクリプトも受け入れられ、documentオブジェクトの中に読み込まれます。確実にするために、地図はページが全て読み込まれた後にページ上に確保され、1回だけ実行される関数でHTMLページの <body> 要素が1回だけ onload イベントを受け取ったとき Map オブジェクトを構築します。 そうするのは、予測不可能な動作を避け、さらにどのような方法で、そしていつ地図が描画されるかを制御するためです。

body タグの onload 属性はイベントハンドラの例です。Google Maps JavaScript APIもイベントに備え、あなたはステートの変化を判別して対応することができます。詳しくは、地図イベントを参照してください。

View example (map-simple.html)

経度と緯度

地図上で位置を示す方法が必要です。google.maps.LatLng オブジェクトはGoogle Maps API の中でそのようなメカニズムを提供します。あなたは、 { 経度, 緯度 }の順にパラメータを指定して LatLng オブジェクトを作成します。

  var myLatlng = new google.maps.LatLng(myLatitude, myLongitude)

※注： 住所(address) が地理的な位置に変換されることを ジオコーディング と言います。 ジオコーディングはGoogle Maps APIの中でサポートされています。詳しくはジオコーディング サービスセクションを参照してください。

LatLng オブジェクトはGoogle Maps APIの中でたくさん使われます。google.maps.Marker オブジェクトは、例えば LatLng をコンストラクタの中で使用し、地図上で指定した地理的な位置にマーカーオーバーレイを設置します。

マップタイプ

Google Maps APIの中で、多くのマップタイプが利用可能です。 また、なじみ深い"彩色された"ロードマップタイルに加えて、Google Maps APIでは他のマップタイプもサポートします。これらのマップタイプは Map options オブジェクトの中の mapTypeId プロパティにセットされています。

以下のマップタイプをGoogle Maps APIの中で利用できます。

  • MapTypeId.ROADMAP は通常のマップビューを表示します。
  • MapTypeId.SATELLITE はGoogle Earth の衛星画像を表示します。
  • MapTypeId.HYBRID は通常と衛星画像の統合された画像を表示します。
  • MapTypeId.TERRAIN は、地図的な情報に基づいて、物理的な地図を表示します。

あなたは set_mapTypeId() を呼び出して地図のマップタイプを変更することができます。