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

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 を使用してレンダリング タイプを指定することもできます。Cloud ベースのマップのスタイル設定を使用 - マップ 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()}`);
  });```