クイックスタート

データドリブン スタイル設定のプレビューを使用するには、JavaScript ベクターマップを使用するマップ ID を作成する必要があります。次に、新しい地図のスタイルを作成して、目的の境界線対象物レイヤを選択し、そのスタイルをマップ ID に関連付ける必要があります。

Region Lookup API を使用する場合は、Google API Console で有効にする必要があります。

Region Lookup API を有効にする

マップ ID を作成する

新しいマップ ID を作成するには、クラウドのカスタマイズ手順を行います。地図のタイプを [JavaScript] に設定し、[ベクター] オプションを選択します。[傾斜] や [回転] のチェックボックスをオンにすると、地図の傾斜と回転が有効になります。傾斜や方角を使用するとアプリに悪影響が及ぶ場合は、[傾斜] と [回転] をオフのままにして、ユーザーが傾斜や方角を調整できないようにします。

ベクターマップ ID を作成

新しい地図のスタイルを作成する

新しい地図のスタイルを作成するには、地図のスタイルの管理手順に沿ってスタイルを作成し、事前に作成したマップ ID にスタイルを関連付けます。

対象物レイヤを選択する

Google API Console では、表示する対象物レイヤを選択できます。これにより、地図上に表示される境界線の種類（地域区分、都道府県など）が決まります。

対象物レイヤの管理手順

  1. Google API Console で、[地図のスタイル] ページに移動します。
  2. 確認のメッセージが表示されたら、プロジェクトを選択します。
  3. 地図のスタイルを選択します。
  4. [対象物レイヤ] プルダウンをクリックして、レイヤを追加または削除します。
  5. [保存] をクリックして変更内容を保存し、地図に表示します。

プルダウンのスクリーンショット。

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

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

  1. API の script タグで v=beta を使用します。たとえば次のようになります。

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

  2. （省略可）region パラメータを追加して、地図の地域を設定します。これにより、アプリケーションが変更され、設定した地域に基づいて異なる地図タイルが表示されるようになります。また、特定の境界線対象物のポリゴンも変更されます。詳しくは、地域のローカライズをご覧ください。

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&region=JP&libraries=places&v=beta&callback=initMap"></script>

  1. mapId プロパティを使用して地図をインスタンス化する際に、マップ ID を指定します。このマップ ID には、対象物レイヤを有効にした地図スタイルを使って設定したものを指定する必要があります。

    map = new
google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID' // A map ID using a style with one or more feature layers enabled.
});

地図に対象物レイヤを追加する

地図上の対象物レイヤへの参照を取得するには、地図の初期化時に map.getFeatureLayer() を呼び出します。

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.773, lng: -156.01 },
    zoom: 12,
    mapId: 'MAP_ID',
  });

  // Add a feature layer for localities.
  localityLayer = map.getFeatureLayer('LOCALITY');
  ...
}

地図の機能をチェックする

データドリブン スタイリングには、Google API Console によって有効化され、マップ ID と関連付けられた機能が必要となります。マップ ID は一時的なものであり変化することもあるため、map.getMapCapabilities() を呼び出すことにより、目的の機能（たとえばデータドリブン スタイリング）が利用可能かどうか、実際にその機能を呼び出す前に確認できます。このチェックは任意です。

次の例はリスナーを追加して、地図の機能の変化を把握する方法を示しています。

// subscribe to changes
map.addListener('mapcapabilities_changed', () => {
  const mapCapabilities = map.getMapCapabilities();

  if (mapCapabilities.isDataDrivenStylingAvailable) {
    // Call data-driven styling here.
  } // When !mapCapabilities.isDataDrivenStylingAvailable, any existing featureLayers are also unavailable.
});

次のステップ