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

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 を作成するには、 Cloud ベースのマップのスタイル設定を使用 - マップ 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()}`);
  });```