スタートガイド

対象読者

このドキュメントは、JavaScript プログラミングやオブジェクト指向プログラミングの知識があるユーザーを対象としています。また、ユーザーから見た Google マップについてもよく理解している必要があります。ウェブ上には、多くの JavaScript チュートリアルがあります。

このドキュメントでは概念を説明しており、読者が短期間で Google Maps JavaScript API について学び、この API を使用してアプリケーションの開発を始めることができるようにすることを目的としています。Google Maps JavaScript API リファレンスも公開されています。

はじめに

Google Maps JavaScript API の学習を始めるには、シンプルな例を見るのが最も簡単な方法です。次のウェブページでは、オーストラリア、ニューサウスウェールズ州シドニーを中心としたマップが表示されます。

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>
  </body>
</html>

例を見る（map-simple.html）。

この単純な例でも、注目するべき点がいくつかあります。

<!DOCTYPE html> 宣言を使用して、アプリケーションを HTML5 として宣言しています。
"map" という名前の div 要素を作成してマップを保持しています。
div 内にマップを作成する JavasScript 関数を定義しています。
script タグを使用して Maps JavaScript API をロードしています。

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

アプリケーションを HTML5 として宣言する

ウェブアプリケーション内で真の DOCTYPE を宣言することをお勧めします。この例では、下に示すように単純な HTML5 DOCTYPE を使用して、アプリケーションを HTML5 として宣言しています。

<!DOCTYPE html>

大部分の最新のブラウザは、この DOCTYPE で宣言されたコンテンツを「標準モード」でレンダリングします。これは、アプリケーションがより多くのブラウザに対応していることを意味します。DOCTYPE は、スムーズなデグレードも可能にしています。つまり、これを認識しないブラウザはこれを無視して、「Quirks モード」を使用してそのコンテンツを表示します。

Quirks モードで動作する一部の CSS は、標準モードでは有効ではありません。特に、パーセントベースのサイズは親ブロック要素から継承する必要があり、これらのいずれかの上位要素でサイズの指定に失敗すると、これらは 0 x 0 ピクセルのサイズとみなされます。この理由から、次の <style> 宣言を含めています。

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

この CSS 宣言は、マップコンテナ <div>（id は map）が HTML 本文の 100% の高さを占めることを示します。これらのパーセンテージを、<body> および <html> に対しても同様に明確に宣言する必要があります。

Google Maps JavaScript API をロードする

Google Maps JavaScript API をロードするには、次の例のように script タグを使用します。

    <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

script タグに含まれる URL は、Maps JavaScript API を利用するために必要なすべてのシンボルと定義をロードする JavaScript ファイルの場所です。この script タグは必須です。

async 属性を使用すると、ブラウザは Maps JavaScript API のロード中にウェブサイトの残りをレンダリングするようになります。API が使用できるようになると、callback パラメータを使用して指定した関数が呼び出されます。

key パラメータには、アプリケーションの API キーが含まれます。詳細については、キーの取得をご覧ください。

注: Google Maps APIs Premium Plan のユーザーは、この API をロードするときに API キーまたは有効なクライアント ID を使用できます。詳細については、Premium Plan ユーザーの認証パラメータをご確認ください。

HTTPS と HTTP のどちらを使用するか

Google では、ウェブ上のセキュリティが重要であると考えています。そのため、可能な限り HTTPS の使用をお勧めします。ウェブをより安全にする取り組みの一環として、Google は Maps JavaScript API のすべてを HTTPS を介して利用可能にしました。HTTPS 暗号化を使用すると、サイトをより強固に保護できるようになり、スヌーピングや改ざんに対する耐性が強化されます。

Maps JavaScript API のロードは、上述の <script> タグを使用して HTTPS を介して行うことをお勧めします。

必要に応じて、中国のユーザー向けに、http://maps.googleapis.com/、または http://maps.google.cn をリクエストすることにより、HTTP を介して Maps JavaScript API をロードできます。

ライブラリ

URL を使用して Maps JavaScript API をロードするときに、オプションで libraries URL パラメータを使用して、追加のライブラリをロードできます。ライブラリは、メインの Maps JavaScript API に追加機能を提供するコードのモジュールですが、具体的にリクエストしないとロードされません。詳細については、Maps JavaScript API のライブラリをご覧ください。

API を同期的にロードする

Maps JavaScript API をロードする script タグ内では、async 属性と callback パラメータを省略できます。これにより、API がダウンロードされるまで API のロードがブロックされます。

これにより、多くの場合ページのロードが低速になりますが、API がすでにロードされていると想定して後続のスクリプトのタグを記述できます。

マップの DOM 要素

<div id="map"></div>

マップをウェブページ上に表示するためには、マップ用の場所を確保する必要があります。通常、これは名前付きの div 要素を作成して、ブラウザのドキュメントオブジェクトモデル（DOM）内でこの要素への参照を取得することで行います。

上記の例では、CSS を使用してマップ div の高さを "100%" に設定しています。これにより、モバイル端末のサイズに合うように拡大されます。場合によっては、幅と高さの値をブラウザの画面サイズとパディングに応じて調節する必要があります。通常、div は含んでいる要素から幅を取得します。通常、空の div の高さは 0 です。この理由から、<div> の高さは常に明示的に設定する必要があります。

マップのオプション

すべてのマップには、center と zoom の 2 つの必須オプションがあります。

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8
});

ズームレベル

マップを表示する初期解像度は、zoom プロパティを使用して設定されます。ズームが 0 で完全にズームアウトした地球の地図に対応し、ズームレベルの高さに応じて高い解像度にズームインします。ズームレベルは、整数で指定します。

zoom: 8

地球全体の地図を単一の画像として指定すると、巨大な地図か、非常に低い解像度の小さな地図となってしまいます。そのため、Google マップおよび Maps JavaScript API 内のマップ画像は、複数のマップタイルに分割され、複数のズームレベルで提供されます。低ズームレベルでは、少数のマップタイルのセットで広範囲をカバーし、高ズームレベルでは、高解像度のタイルで狭い範囲をカバーします。次のリストは、各ズームレベルで表示されるおおよその詳細度を示しています。

1: 世界
5: 大陸
10:市
15:通り
20:建物

次の 3 つの画像は、東京の同じ場所をそれぞれズームレベル 0、7、18 で表示したものです。

Maps JavaScript API が現在のズームレベルに基づいてタイルをロードする仕組みの詳細については、マップタイプのドキュメントのタイル座標をご覧ください。

マップオブジェクト

map = new google.maps.Map(document.getElementById("map"), {...});

マップを表す JavaScript クラスは Map クラスです。このクラスのオブジェクトは、あるページ上の単一のマップを定義します（このクラスの複数のインスタンスを作成できます。各オブジェクトは特定のページ上の個別マップを定義することになります）。このクラスの新しいインスタンスは、JavaScript の new 演算子を使用して作成します。

新しいマップインスタンスを作成するときに、マップのコンテナとしてページ内に <div> HTML 要素を指定します。HTML ノードは JavaScript document オブジェクトの子要素であり、document.getElementById() メソッドを使用してこの要素への参照を取得します。

このコードは、変数（名前は map）を定義して、その変数を新しい Map オブジェクトに渡します。関数 Map() はコンストラクタとして知られています。その定義を下に示します。

コンストラクタ	説明
`Map(mapDiv:Node, opts?:MapOptions )`	渡される任意（省略可）のパラメータを使用して、指定された HTML コンテナ（通常は div 要素）内に新しいマップを作成します。

トラブルシューティング

注: sensor パラメータは必須ではなくなりました。

マップのコードが正常に動作するように、Brendan Kenny と Mano Marks はいくつかの一般的なミスとその修正方法をこのビデオで指摘しています。

コードが動作しない場合:

入力ミスを探します。JavaScript では大文字と小文字が区別されることに注意してください。
基本を確認します。よくある問題のいくつかは、初期マップの作成で発生します。次の点を確認してください。
- マップオプションで zoom および center プロパティが指定されているか確認します。
- マップを画面上で表示するための div 要素を宣言していることを確認します。
- マップの div 要素に高さがあることを確認します。デフォルトでは、div 要素は高さ 0 で作成されるため非表示となります。
例を参照して基準となる実装を確認してください。
JavaScript デバッガを使用して、問題の特定に役立ててください。Chrome Developer Tools で使用できるものなどがあります。初めに、JavaScript コンソールでエラーを探します。
Stack Overflow に質問を投稿します。優れた質問を投稿する方法のガイドラインがサポートページに記載されています。

以上で完了です。

対象読者

はじめに

アプリケーションを HTML5 として宣言する

Google Maps JavaScript API をロードする

HTTPS と HTTP のどちらを使用するか

ライブラリ

API を同期的にロードする

マップの DOM 要素

マップのオプション

ズームレベル

マップオブジェクト

トラブルシューティング

フィードバックを送信...

以上で完了です。

Google Maps JavaScript API をアクティベートする

スタートガイド

対象読者

はじめに

アプリケーションを HTML5 として宣言する

Google Maps JavaScript API をロードする

HTTPS と HTTP のどちらを使用するか

ライブラリ

API を同期的にロードする

マップの DOM 要素

マップのオプション

ズームレベル

マップ オブジェクト

トラブルシューティング

フィードバックを送信...

マップオブジェクト