GoogleMapsAPI

Google Maps JavaScript API v3の使い方（１）

今回から数回にわたって「Google Maps JavaScript API v3」の使い方について書いていきます。
公式ドキュメントの流れに沿って説明します。

執筆時点でのGoogle Maps JavaScript API v3のリリースバージョンは3.9です。
ご覧になったタイミングによっては、Google Maps JavaScript API v3のバージョンアップに伴い使用方法が異なる可能性があります。
（バージョンを指定してAPIを呼び出す方法は後述します）

現在の公式ドキュメントには、

すべての Maps API アプリケーション* では、API キーを使用して Maps API を読み込む必要があります。API キーを使用することで、アプリケーションの Maps API 使用状況を各自でモニタリングすることが可能になります。また、API キーを元に、必要に応じて、Google より、アプリケーションに関して連絡を取ることがあります。アプリケーションの Maps API 使用量が使用制限を超過した場合、API キーを使用して Maps API を読み込み、追加割り当てを購入する必要があります。

と書かれております。
以前はAPIキーは必要なかったのですが、Google Maps API for Businessの発表時にそれっぽいアナウンスがあっていたので、タイミング的にはその辺りかもしれません。

APIキーの取得

APIキーの作成方法の部分を公式ドキュメントから抜粋します。

  1. API コンソール https://code.google.com/apis/console にアクセスし、Google アカウントでログインします。
  2. 左側のメニューから [Services] をクリックします。
  3. Google Maps API v3 サービスをオンにします。
  4. 左側のメニューから [API Access] をクリックします。API キーは、[API Access] ページの [Simple API Access] セクションにあります。Maps API アプリケーションでは [Key for browser apps] を使用します。


デフォルトでは、このキーはどのサイトでも利用できます。不正なサイトでの使用を防ぐため、管理者権限を持つドメインでのみこのキーを使用することを強くおすすめします。API キーの [Edit allowed referrers…] をクリックすると、キーを使用できるドメインを指定することができます。
※上記説明は少し情報が古いようです。APIコンソールの画面が現在とは異なります

地図を表示する

まずは簡単な例を紹介します。以下のHTMLは、熊本城を中心とした地図を表示します。
（公式ドキュメントのサンプルを少し変更してます）

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(32.806187,130.705832),
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

例を表示(map-simple.html)

ここではbodyタグのonloadイベントから初期化していますが、jqueryを併用する場合は次のように書くこともできます。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
    </script>
    <script type="text/javascript">
      $(function(){
        var mapOptions = {
          center: new google.maps.LatLng(32.806187,130.705832),
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map($("#map_canvas").get(0),
            mapOptions);
      });
    </script>
  </head>
  <body>
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

例を表示(map-simple_jquery.html)

どちらを使うかは必要に応じて使い分ければOKです。
以下の説明ではbodyのonloadイベントから初期化するパターンになります。

Google Maps APIを読み込む

<html>
  <head>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
    </script>

scriptタグ内のURLは、javascriptファイルの位置を示しており、このファイルにはGoogle Maps APIを使用する上で必要なシンボルと定義がすべて入っています。このscriptタグは必須です。

keyパラメータにはアプリケーションのAPIキーが含まれています。APIキーはAPIコンソールから生成する必要があります。
APIキーは必須です。

sensorパラメータは必須です。このアプリケーションがユーザーの位置情報を取得するのにセンサー（GPS など）を使用するかどうかを示します。この例では、パラメータの値を true または false に明示的に設定する必要があることを強調するために、set_to_true_or_false を変数のままにしています。

HTTPS

HTTPSアプリケーションの場合は、HTTPS接続で Google Maps JavaScript API を読み込むこともできます。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"
  type="text/javascript"></script>

必要に応じて使い分けましょう。

地図のDOM要素

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

地図をウェブページに表示するには、そのための領域を用意する必要があります。それには、ブラウザのDOM内で名前付きの div 要素を作成し、この要素への参照を取得してください。

上の例では「map_canvas」というIDの＜div＞ を定義し、style 属性でそのサイズを設定しています。この値は携帯端末で適切なサイズに拡張されるよう「100%」に設定されています。これらの値は、必要に応じてブラウザの画面サイズに合わせて調整します。地図は常にそのサイズを、地図を収容する要素のサイズから取得するので、＜div＞のサイズは常に明示的に設定する必要があります。

地図のオプション

var mapOptions = {
  center: new google.maps.LatLng(32.806187,130.705832),
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

地図を初期化するために、まず地図の初期化変数を保持する Map options オブジェクトを作成します。このオブジェクトは構築するのではなく、オブジェクト リテラルとして作成します。
ここでは、「中心の位置」「ズームレベル」「マップタイプ」の3つが必須なのでその3つについて説明します。

緯度と経度

特定の地点を地図の中心として設定するには、その位置を格納するための LatLng オブジェクトを作成し、位置の座標を「緯度, 経度」の順序で渡します。

center = new google.maps.LatLng(32.806187,130.705832)

ズーム レベル

地図を表示するための最初の解像度は、zoom プロパティで設定します。ズーム 0 は、完全にズームアウトして地球全体を表示した状態です。ズーム レベルを上げるほど、ズームインして解像度が高くなります。

zoom: 8

地球全体の地図を 1 つの画像として表示するには、巨大な地図を用意するか、解像度をかなり下げて小さな地図で表示する必要があります。そのため、Google マップおよび Maps API では、地図画像を「タイル」に分割して「ズーム レベル」ごとに保持しています。低いズーム レベルでは、少数のマップ タイルで広い領域をカバーします。ズーム レベルが上がるほど、解像度の高いタイルで、より小さい領域をカバーします。

マップ タイプ

初期マップ タイプも明示的に設定する必要があります。

mapTypeId: google.maps.MapTypeId.ROADMAP

サポートされているマップ タイプは次のとおりです。

  • ROADMAP は、Google マップの通常のデフォルトである 2D タイルを表示します。
  • SATELLITE は、写真タイルを表示します。
  • HYBRID は、写真タイルと主要な対象物（道路、地名）のタイル レイヤを組み合わせて表示します。
  • TERRAIN は、物理的な起伏を示すタイルで、高度や水系の対象物（山、河川など）を表示します。

    • ほとんどの場合は上記の基本タイプを知っていれば十分です。

    地図オブジェクト

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

    地図を表す JavaScript クラスは、Map クラスです。このクラスのオブジェクトは、1 つの地図をページ上に定義します（このクラスのインスタンスを複数作成することで、別々の地図を同じページ上に生成することもできます）。JavaScript の new 演算子を使用して、このクラスの新しいインスタンスを作成します。

    新しい地図のインスタンスを作成するときは、地図のコンテナとして、ページ内で

    HTML ノードを指定します。HTML ノードは JavaScript の document オブジェクトの子要素となります。また、document.getElementById() メソッドでこの要素への参照を取得します。

    このコードでは変数（名前は map）を定義し、この変数を新しい Map オブジェクトに割り当てます。また、mapOptions オブジェクト リテラル内で定義したオプションを渡します。各オプションは、地図のプロパティを初期化するのに使用します。

    地図を読み込む

    <body onload="initialize()">

    HTML ページをレンダリングすると同時に、DOMを作成し、外部の画像とスクリプトをすべて取得して、document オブジェクトに組み込みます。必ずページの読み込みが完了した後に地図を配置するには、HTML ページの 要素が onload イベントを受け取ったときにのみ Map オブジェクトを作成する関数を実行します。これにより、予測できない動作を防ぎ、地図を描画する方法とタイミングを正確にコントロールすることができます。

    おわりに

    以上で冒頭に紹介した地図を表示できるようになります。
    まずは上記サンプルの中心の位置を変更して、別の位置が表示されるかを確かめるといいでしょう。
    次回はマーカーを配置する方法についての説明を予定してます。