以上で完了です。

開発を始めるには、デベロッパー ドキュメント をご覧下さい。

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

まず初めに Google Developers Console で次の作業を行います。

  1. プロジェクトを作成または選択する
  2. Google Maps JavaScript API と関連サービスをアクティベートする
  3. 適切なキーを作成する
続ける

Google Maps JavaScript API アプリケーションを v2 から v3 にアップグレードする

Google Maps JavaScript API のバージョン 2 は、ご利用いただけません。このガイドは、すでに Google Maps JavaScript API v2 を使用しているデベロッパーが、コードをバージョン 3に移行することの支援を目的としています。

Google Maps JavaScript API の v2 と v3 では、多くの点が変更されています。新しい API を使い始めると、これが単なる増分アップグレードではないことにすぐに気がつくと思います。優れた新機能が追加され、デベロッパーの観点からこの API のユーザビリティが改善されたことは朗報でしょう。Google Maps JavaScript API v2 から Google Maps JavaScript API v3 へのアップグレードを計画しているユーザーを対象に、このガイドでは全体的な移行プロセスについて説明します。また、v2 API のユーザー向けに最も一般的な変更点も紹介します。

概要

移行プロセスはアプリケーションごとに若干異なりますが、すべてのプロジェクトに共通の手順がいくつかあります。

  1. 新しいキーを取得する。Google Maps JavaScript API は、Google API Console を使用してキーを管理するようになりました。移行を開始する前に、必ず新しい API キーを取得してください。
  2. API ブートストラップをアップデートする。大部分のアプリケーションは、次のコードで Google Maps JavaScript API v3 をロードします。
    <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true_OR_false"></script>
    
  3. コードをアップデートする。必要な変更の量は、アプリケーションによって大きく異なりますが、次のような共通の変更点があります。
    • 常に google.maps 名前空間を参照する。v3 では、すべての Google Maps JavaScript API コードが google.maps.* 名前空間に格納され、グローバル名前空間には格納されません。ほどんどのオブジェクトは、このプロセスの一環として名前が変更されています。たとえば、GMap2 ではなく google.maps.Map をロードするようになりました。
    • 廃止されたメソッドへの参照をすべて削除する。GDownloadURLGLog などの多くの汎用ユーティリティ メソッドが削除されています。この機能をサードパーティのユーティリティ ライブラリと置き換えるか、これらの参照をコードから削除します。
    • (オプション)ライブラリをコードに追加する。多くの機能が外部のユーティリティ ライブラリに置かれているため、各アプリケーションは使用する API をロードするだけで済みます。
    • (オプション)プロジェクトが v3 エクスターン(extern)を使用するように設定する。v3 エクスターンを使用すると、Closure Compiler を使用したコードの検証、または IDE でのオートコンプリートのトリガーが容易になります。詳細については、高度なコンパイルとエクスターンに関するドキュメントをご覧ください。
  4. テストと反復。この時点で必要な作業はまだ残っていますが、新しい v3 マップ アプリケーションの完成まであと少しです。

Google Maps JavaScript API のバージョン 3 の変更点

移行を計画する前に、Google Maps JavaScript API v2 と Google Maps JavaScript API v3 の違いを理解しておく必要があります。Google Maps JavaScript API の最新バージョンはゼロから作成され、最新の JavaScript プログラミング手法、多くのライブラリの使用、API の簡素化に主眼を置いています。多くの新機能が API に追加され、なじみのある機能がいくつか変更または削除されています。このセクションでは、2 つのリリース間の主要な相違について取り上げます。

v3 API の主な変更点は次のとおりです。

  • コア ライブラリが効率化されました。多くの補足機能がライブラリに移動し、コア API のロードおよび解析時間が削減されたため、どのような端末でもマップを迅速にロードできるようになりました。
  • ポリゴンのレンダリングやマーカーの配置など、いくつかの機能のパフォーマンスが向上しました。
  • クライアント側の使用制限に対するアプローチにより、モバイル プロキシや企業ファイアウォールで使用される共有アドレスへの対応が改善しました。
  • いくつかの最新のブラウザおよびモバイル ブラウザのサポートが追加されました。Internet Explorer 6 のサポートが削除されました。
  • 多くの汎用ヘルパー クラス( GLog または GDownloadUrl)が削除されました。現在、ClosurejQuery などの同様な機能を提供する優れた JavaScript ライブラリが存在します。
  • あらゆるモバイル端末でロードされる HTML5 ストリート ビューが実装されました。
  • 独自の写真を使用したカスタム ストリート ビュー パラメータにより、スキー場、売り家、またはその他の有名スポットのパノラマ画像を共有できます。
  • スタイル化されたマップのカスタマイズにより、ベースマップ上の要素の表示を、独自の視覚的なスタイルに合わせて変更できます。
  • エレベーション サービス距離マトリックスなどのいくつかの新しいサービスをサポートします。
  • ルートサービスが改善され、代替ルート、ルートの最適化(巡回セールスマン問題とほぼ同等のソリューション)、自転車ルート(自転車レイヤを使用)、交通機関のルート、およびドラッグ可能なルートが提供されます。
  • ジオコーディングの形式がアップデートされ、Google Maps Geocoding API v2 の accuracy 値より正確なタイプ情報が提供されます。
  • 単一のマップで複数の情報ウィンドウがサポートされます。

アプリケーションのアップグレード

新しいキー

Google Maps JavaScript API v3 では、新しいキーシステムが使用されます。これは、v2 のキーは v3 アプリケーションでは動作しないことを意味します。アプリケーションを展開する前に v3 キーを追加することで、実稼働で以下が可能になります。

  • Google API Console で使用状況レポートを表示できます。
  • 必要に応じて追加割り当てを購入できます。
  • アプリケーションに関してアプリケーションの所有者に連絡する方法を Google に提供できます。

キーは、Google Maps JavaScript API v3 をロードするときに渡されます。キーを生成するには、次の手順に従います。

  1. Google API Console にアクセスし、Google アカウントでログインします。
  2. 左側のメニューから [Services] をクリックして、Google Maps JavaScript API v3 サービスをアクティベートします。
  3. サービスがアクティベートされたら、API キーを [API Access] ページの [Simple API Access] セクションで入手できます。Maps API アプリケーションでは、[Key for browser apps] を使用します。

Maps APIs for Work ライセンスのクライアント ID

Google Maps APIs for Work ライセンスをお持ちの場合は、キーの代わりにクライアント ID を使用する必要があります。この 2 つを同時に使用することはできません。クライアント ID はキーと似ていますが次の点が異なります。

  • クライアント ID を使用した Google Maps APIs アプリケーションは、Maps Analytics などの追加機能や制限を利用できます。
  • クライアント ID は Google Cloud Support により作成され、Maps APIs for Work のウェルカム レターで提供されます。クライアント ID を作成または探すために Google API Console は使いません。
  • Google Maps JavaScript API をロードするときに client パラメータを使用し、key パラメータは使用しません。次に例を示します。
    <script src="//maps.googleapis.com/maps/api/js?v=3&client=gme-yourclientid&sensor=true_or_false" type="text/javascript"></script>
  • クライアント ID には常に接頭辞 gme- が付きます。

API のロード

まずはコードを修正して API のロード方法を変更する必要があります。v2 では、http://maps.google.com/maps へのリクエストにより Google Maps JavaScript API をロードします。Google Maps JavaScript API v3 をロードする場合、次の変更を行う必要があります。

  1. API を //maps.googleapis.com/maps/api/js からロードします。
  2. file パラメータを削除します。
  3. 必要な sensor パラメータを含めます。
  4. 新しい v3 キーで key パラメータをアップデートします。Google Maps APIs for Work のユーザーは client パラメータを使用する必要があります。
  5. (Google Maps APIs Premium Plan のみ)client パラメータを Google Maps APIs Premium Plan デベロッパー ガイドの説明のとおりに指定していることを確認します。
  6. v パラメータを削除して、最新のリリース バージョンをリクエストします。または、その値を v3 バージョニング スキームに適宜変更します。
  7. (オプション)hl パラメータを language パラメータに置き換えて、その値を維持します。
  8. (オプション)libraries パラメータを追加して、オプションのライブラリをロードします。

最も単純な場合、v3 ブートストラップでは次のように API キーと sensor パラメータのみを指定します。

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

次の例は、Maps JavaScript API v2 のドイツ語の最新(エクスペリメンタル)バージョンをリクエストします。

<script type="text/javascript" src="//maps.google.com/maps?file=api&v=2.x&sensor=false&key=YOUR_API_KEY&hl=de"></script>

次の例は、v3 の場合の同等のリクエストです。

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=YOUR_API_KEY&language=de"></script>

バージョニング

v3 では、特定のバージョンのロードは必須ではありません。バージョン パラメータを省略した場合、最新のエクスペリメンタル バージョンの API を取得します。必要に応じて、特定のバージョン番号、最新(エクスペリメンタル)バージョン、または最も安定したフローズン バージョンを指定できます。

次の表は、v2 バージョン スキームと v3 の対応を示しています。

v2 v3 ユースケース
2.s 3.0 フローズン バージョン。使用可能な最も古いバージョンです。
2 3 リリース バージョン。最新の安定バージョンです。
2.x 3.exp エクスペリメンタル バージョン。

重要: Google Maps APIs Premium Plan SLAエクスペリメンタル バージョンには適用されません。Google Maps APIs Premium Plan アプリケーションでは、SLA が適用される現行のリリース バージョンまたはフローズン バージョンを使用してください。

google.maps 名前空間の導入

Google Maps JavaScript API v3 で最も注目すべき変更点は、google.maps 名前空間の導入だと言えるでしょう。v2 API では、すべてのオブジェクトをデフォルトでグローバル名前空間に配置するため、名前の重複が発生します。v3 では、すべてのオブジェクトが google.maps 名前空間内に配置されます。

アプリケーションを v3 に移行するときは、新しい名前空間を使用するようにコードを変更する必要があります。単に「G」を検索して「google.maps.」に置換する方法では不十分ですが、コードを確認する際にはこの方法でも基本的に問題ありません。次に、v2 と v3 で同等なクラスの例をいくつか示します。

v2 v3
GMap2 google.maps.Map
GLatLng google.maps.Map
GInfoWindow google.maps.InfoWindow
GMapOptions google.map.MapOptions
G_API_VERSION google.maps.version
GPolyStyleOptions google.maps.PolygonOptions
または google.maps.PolylineOptions

廃止されたコードの削除

Google Maps JavaScript API v3 には v2 のほとんどの機能が含まれていますが、一部の機能はサポートされなくなりました。移行の一環として、これらの機能をサードパーティのユーティリティ ライブラリに置き換えるか、これらの参照をコードから削除する必要があります。ClosurejQuery など、同様な機能を提供する優れた JavaScript ライブラリは数多く存在します。

次のクラスは、Google Maps JavaScript API v3 に同等なクラスがありません。

GBoundsGLanguage
GBrowserIsCompatibleGLayer
GControlGLog
GControlAnchorGMercatorProjection
GControlImplGNavLabelControl
GControlPositionGObliqueMercator
GCopyrightGOverlay
GCopyrightCollectionGPhotoSpec
GDownloadUrlGPolyEditingOptions
GDraggableObjectGScreenOverlay
GDraggableObjectOptionsGStreetviewFeatures
GFactualGeocodeCacheGStreetviewLocation
GGeoAddressAccuracyGStreetviewOverlay
GGeocodeCacheGStreetviewUserPhotosOptions
GGoogleBarGTileLayerOptions
GGoogleBarAdsOptionsGTileLayerOverlayOptions
GGoogleBarLinkTargetGTrafficOverlayOptions
GGoogleBarListingTypesGUnload
GGoogleBarOptionsGXml
GGoogleBarResultListGXmlHttp
GInfoWindowTabGXslt
GKeyboardHandler

コードの比較

v2 と v3 の API を使用して作成した 2 つの単純なアプリケーションを比較してみましょう。

<!DOCTYPE html>
<html>
  <head>
    <script src="//maps.google.com/maps?file=api&v=2&key=YOUR_API_KEY&sensor=false"
        type="text/javascript"></script>
    <style type="text/css">
      html, body, #map { height: 100%; margin: 0; }
    </style>
    <script type="text/javascript">
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(
            document.getElementById('map'));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        map.setUIToDefault();

        map.addOverlay(new GMarker(new GLatLng(37.4419, -122.1419)));

      }
    }
    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map"></div>
  </body>
</html>
    
<!DOCTYPE html>
<html>
  <head>
    <script src="//maps.googleapis.com/maps/api/js?sensor=false"
        type="text/javascript"></script>
    <style type="text/css">
      html, body, #map { height: 100%; margin: 0; }
    </style>
    <script type="text/javascript">
    function initialize() {
      var map = new google.maps.Map(
        document.getElementById('map'), {
          center: new google.maps.LatLng(37.4419, -122.1419),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      var marker = new google.maps.Marker({
            position: new google.maps.LatLng(37.4419, -122.1419),
            map: map
      });

    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>
    

2 つのアプリケーションにはいくつかの相違点があることがわかります。主な変更点は、以下の通りです。

  • API のロード元のアドレスが変更されています。
  • GBrowserIsCompatible() メソッドと GUnload() メソッドは v3 では不要になり、API から削除されました。
  • GMap2 オブジェクトが、API の中核オブジェクトである google.maps.Map に置き換えられました。
  • プロパティが Options クラスからロードされるようになりました。上の例では、マップのロードに必要な centerzoom および mapTypeId の 3 つのプロパティを、インラインの MapOptions オブジェクトを介して設定しています。
  • v3 ではデフォルトでデフォルト UI がオンになっています。これは、MapOptions オブジェクトで disableDefaultUI プロパティを true に設定することで無効にできます。

まとめ

ここまでで、Google Maps JavaScript API v2 から Google Maps JavaScript API v3 への移行に関するいつくかの重要なポイントを理解できたと思います。把握すべき情報は他にもたくさんありますが、その内容はアプリケーションによって異なります。以降のセクションでは、想定される特定の状況における移行手順について説明しています。また、アップグレードのプロセスで役に立つと思われる参考資料を以下にいくつか紹介します。

この記事について問題や質問がある場合は、このページの上部にあるこのドキュメントに関するフィードバックのリンクを使用してください。

詳細な参照情報

このセクションでは、Google Maps JavaScript API のバージョン 2 とバージョン 3 の両方で最も一般的な機能の詳細な比較を行います。この参照情報の各セクションは、個別に読めるように構成されています。この参照情報をすべて読むことはお勧めしません。状況に応じて必要な箇所を読み、移行に役立ててください。

  • イベント - イベントの登録と処理。
  • コントロール - マップに表示されるナビゲーション コントロールの操作。
  • オーバーレイ - マップへのオブジェクトの追加とその編集。
  • マップタイプ - ベースマップを構成するタイル。
  • レイヤ - KML レイヤや交通状況レイヤなどの、グループとしてのコンテンツの追加と編集。
  • サービス - Google のジオコーディング、ルート案内、ストリート ビューの各サービスの使用。

イベント

Google Maps JavaScript API v3 のイベントモデルは、v2 で使用されているものと似ていますが、内部的には多くの変更が入っています。

コントロール

Google Maps JavaScript API は、ユーザーがマップを操作できる UI コントロールを表示します。この API を使用すると、コントロールの表示方法をカスタマイズできます。

オーバーレイ

オーバーレイは、点、線、領域、またはオブジェクトの集合を指定するためにマップに追加したオブジェクトを反映します。

マップタイプ

v2 と v3 で使用可能なマップタイプは若干異なりますが、すべての基本マップタイプは両方のバージョンの API で使用可能です。v2 は、デフォルトで標準のペイント道路地図タイルを使用します。ただし、v3 では google.maps.Map オブジェクトの作成時に特定のマップタイプを指定する必要があります。

レイヤ

レイヤは、1 つ以上のオーバーレイで構成されるマップ上のオブジェクトです。レイヤは 1 つのユニットとして操作でき、通常はオブジェクトの集合を反映します。

サービス

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

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