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

Maps JavaScript API では、ラスターとベクターという 2 種類の地図を実装できます。ラスターマップはデフォルトで読み込まれ、ピクセルベースのラスター画像タイルのグリッドとして読み込まれます。このタイルは Google Maps Platform のサーバーサイドで生成され、ウェブアプリに提供されます。ベクターマップはベクターベースのタイルで構成されています。これらのタイルは、WebGL を使用してクライアントサイドで読み込み時に描画されます。WebGL は、ブラウザがユーザーのデバイス上の GPU にアクセスして 2D グラフィックと 3D グラフィックをレンダリングできるようにするウェブ技術です。ベクター地図タイプは、視覚的な忠実度が向上し、地図上での傾斜と方位を制御できるため、最適なユーザー エクスペリエンスを実現できます。ベクター地図の機能の詳細

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

renderingType オプションを指定する

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

  1. RenderingType ライブラリを読み込みます。これは、マップ ライブラリを読み込むときに行えます。

    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'
});