スタートガイド

対象読者

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

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

はじめに

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

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body { height: 100%; margin: 0; padding: 0; }
      #map { height: 100%; }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript">

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

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

例を見る(map-simple.html)

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

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

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

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

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

<!DOCTYPE html>

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

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

<style type="text/css">
  html, body { height: 100%; margin: 0; padding: 0; }
  #map { height: 100%; }
</style>

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

Google Maps API をロードする

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

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

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

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

Google Maps APIs Premium Plan ユーザーは、Premium Plan ドキュメントの Google Maps JavaScript API のロードを参照して、Maps API をアプリケーションにロードする際の重要な情報を確認してください。

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

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

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

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

ライブラリ

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

API を同期的にロードする

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

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

マップの DOM 要素

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

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

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

マップのオプション

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

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

ズームレベル

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

zoom: 8

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

次の 3 つの画像は、東京の同じ場所をズームレベル 0、7、および 18 で表しています。

Maps 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 要素)内に新しいマップを作成します。

トラブルシューティング

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

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

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

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

Google Maps JavaScript API
Google Maps JavaScript API
ご不明な点がありましたら、Google のサポートページをご覧ください。