レンダリング タイプ（ラスターとベクター）

Maps JavaScript API では、ラスターとベクターという 2 種類の地図を実装できます。ラスターマップは、Google Maps Platform のサーバーサイドで生成され、ウェブアプリに配信されるピクセルベースのラスター画像タイルのグリッドとしてマップを読み込みます。ベクターマップは、ベクターベースのタイルで構成され、読み込み時にクライアントサイドで WebGL を使用して描画されます。WebGL は、ブラウザがユーザーのデバイスの GPU にアクセスして 2D および 3D グラフィックをレンダリングできるようにするウェブ テクノロジーです。

ベクターマップ タイプは、視覚的な忠実度の向上、地図間のキャッシュ保存の改善、地図の傾斜と方角の制御機能など、ユーザー エクスペリエンスの向上に役立つため、おすすめします。詳しくは、ベクター地図の機能をご覧ください。

デフォルトのレンダリング タイプ

地図のデフォルトのレンダリング タイプは、実装によって異なります。

  • <gmp-map> 要素を使用するマップは、デフォルトでベクター レンダリング タイプになります。

  • google.maps.Map を含む <div> 要素を使用する地図は、デフォルトでラスタ レンダリング タイプになります。

地図のレンダリング タイプを設定するには、renderingType マップ オプションを指定するか、関連付けられたマップ ID でオプションを設定します。renderingType オプションは、マップ ID を構成して設定したレンダリング タイプをオーバーライドします。

renderingType オプションを指定する

renderingType オプションを使用すると、地図のラスター レンダリング タイプまたはベクター レンダリング タイプを指定できます（地図 ID は不要です）。div 要素と JavaScript を使用して読み込まれた地図の場合、デフォルトのレンダリング タイプは google.maps.RenderingType.RASTER です。renderingType オプションを設定する手順は次のとおりです。

  1. RenderingType ライブラリを読み込みます。これは、Maps ライブラリの読み込み時に行うことができます。

    const { Map, RenderingType } = await google.maps.importLibrary("maps");

  2. 地図を初期化するときに、renderingType オプションを使用して RenderingType.VECTOR または RenderingType.RASTER を指定します。

    map = new Map(
  document.getElementById('map'),
  {
    zoom: 4,
    center: position,
    renderingType: RenderingType.VECTOR,
  }
);

ベクター地図のレンダリング タイプを設定する場合は、必要な機能のオプションを設定する必要があります。

  • 傾斜を有効にするには、tiltInteractionEnabled 地図オプションを true に設定するか、map.setTiltInteractionEnabled(true) を呼び出します。
  • パンを有効にするには、headingInteractionEnabled 地図オプションを true に設定するか、map.setHeadingInteractionEnabled(true) を呼び出します。

<gmp-map> 要素を使用して読み込まれた地図の場合、デフォルトのレンダリング タイプは google.maps.RenderingType.VECTOR で、傾斜と方角のコントロールが有効になっています。<gmp-map> 要素を使用してレンダリング タイプを設定するには、rendering-type 属性を使用します。

マップ ID を使用してレンダリング タイプを設定する

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

ベクターマップのマップ ID を作成

次に、作成したマップ ID を使用して地図の初期化コードを更新します。マップ ID は [マップ管理] ページで確認できます。次のように、mapId プロパティを使用して地図をインスタンス化する際に、マップ ID を指定します。

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

使用中のレンダリング タイプを検出する

使用されているレンダリング タイプを検出するには、次の例に示すように、地図オブジェクトで getRenderingType() を呼び出します。

  // Wait for the map to finish loading.
  google.maps.event.addListenerOnce(map, "tilesloaded", () => {
      // Print the rendering type to the console.
      console.log(`${map.getRenderingType()}`);
  });```