概要

Maps JavaScript API WebGL ベータ版へようこそ。このリリースでは、Maps JavaScript API 向けの新しい WebGL 機能が導入され、ベクター地図に以下の機能が追加されました。

  • WebGL オーバーレイ表示を使用すると、カスタムの 2D / 3D グラフィックとアニメーション コンテンツを地図に追加できます。
  • マウスとキーボードのジェスチャーを使用して、傾斜と方角をプログラムによって調整できるようになりました。
  • map.moveCamera() を使用すると、複数のカメラ プロパティを同時に変更できます。
  • ズームが小数値に対応しました。

スタートガイド

新しい WebGL 機能を使用するには、ベクター地図を使用する地図 ID が必要です。API ブートストラップ リクエストも更新する必要があります。このセクションでは、その方法について説明します。

新しい地図 ID を作成する

新しい地図 ID を作成するには、Cloud ベースのマップのスタイル設定を使用 - 地図 ID を取得するに記載されている手順に従ってください。地図のタイプを [JavaScript] に設定し、[ベクター] オプションを選択します。[傾斜] や [回転] のチェックボックスをオンにすると、地図の傾斜と回転が有効になります。これにより、こうした値をプログラムで調整できるほか、ユーザーが地図上で直接傾斜や方角を調整できるようになります。傾斜や方角を使用するとアプリに悪影響が及ぶ場合は、[傾斜] と [回転] をオフのままにして、ユーザーが傾斜や方角を調整できないようにします。

ベクター地図 ID を作成

地図の初期化コードを更新する

これには、作成した地図 ID が必要です。この ID は [マップの管理] ページで確認できます。

  1. API の script タグで v=beta を使用します。例は次のとおりです。

    <script
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&v=beta&callback=initMap">
    </script>
  2. 次のように、mapId プロパティを使用して地図をインスタンス化する際に、地図 ID を指定します。

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

次の機能については、使用例を確認できます。