サポート

このページには、ベクター地図と WebGL 機能に関する既知の問題と、その対応策が記載されています。

ブラウザ / デバイスのサポート

WebGL 機能のプレビューは、Maps JavaScript API と同じブラウザとデバイスに対応しています。特定のデバイスのブラウザが WebGL に対応しているかどうかを確認するには、https://get.webgl.org/ または caniuse.com にアクセスしてください。またブラウザ設定で、ハードウェアアクセラレーションが有効になっていることをご確認ください。ハードウェアアクセラレーションが無効になっている場合、ベクター地図はラスターに戻ります。

ラスターかベクターか

時折、ベクター地図がラスターにフォールバックされることがあります。その場合、ベクター地図に依存する対象物は利用できなくなります。ラスター地図へのフォールバックは、さまざまな理由で発生する可能性があります。このセクションでは、ウェブブラウザを適切に設定する方法と、ベクター地図の機能が存在するかどうかをプログラムで確認する方法について説明します。

Chrome でブラウザの機能を確認する

Chrome の特定のインストールで有効にされているハードウェアアクセラレーション機能を確認するには、chrome://gpu/ に移動し、次の項目が有効である（緑色）ことを確認してください。

「OpenGL: Enabled」
「WebGL: Hardware accelerated」
「WebGL2: Hardware accelerated」

ハードウェアアクセラレーションを有効にする

ベクター地図をサポートするには、ほとんどのブラウザでハードウェアアクセラレーションを有効にする必要があります。Chrome と Microsoft Edge でハードウェアアクセラレーションを有効にするには、[設定] を開いて [システム] を選択し、必要に応じて [ハードウェアアクセラレーションが使用可能な場合は使用する] を有効にします。

詳しくは、Safari で「Web サイト」環境設定を変更するをご覧ください。
詳しくは、Firefox's performance settings をご覧ください。

ラスター地図かベクター地図かをプログラムで確認する

map.getRenderingType() を呼び出すと、地図がラスターとベクターのどちらであるかをプログラムで確認できます。次のサンプルは、renderingtype_changed イベントをモニタリングするコードです。このコードにより、ラスター地図とベクター地図のどちらが使用されているかを示す情報ウィンドウが表示されます。

TypeScript

/**
 * This example creates a map with an info window that shows whether
 * the map render type is raster or vector.
 */

 function initMap() {
    const center = {lat: 0, lng: 0};
    const map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
      center,
      zoom: 10,
      heading: 0.0,
      tilt: 0.0,
      // Map ID for a vector map.
      mapId: '6ff586e93e18149f',
    });
    const canvas = document.createElement("canvas");
    const infoWindow = new google.maps.InfoWindow({
      content: '',
      ariaLabel: 'Raster/Vector',
      position: center,
    });
    infoWindow.open({
      map,
    });

    map.addListener('renderingtype_changed', () => {
      infoWindow.setContent(`${map.getRenderingType()}`);
    });
  }

  declare global {
    interface Window {
      initMap: () => void;
    }
  }
  window.initMap = initMap;index.ts

JavaScript

/**
 * This example creates a map with an info window that shows whether
 * the map render type is raster or vector.
 */
function initMap() {
  const center = { lat: 0, lng: 0 };
  const map = new google.maps.Map(document.getElementById("map"), {
    center,
    zoom: 10,
    heading: 0.0,
    tilt: 0.0,
    // Map ID for a vector map.
    mapId: "6ff586e93e18149f",
  });
  const canvas = document.createElement("canvas");
  const infoWindow = new google.maps.InfoWindow({
    content: "",
    ariaLabel: "Raster/Vector",
    position: center,
  });

  infoWindow.open({
    map,
  });
  map.addListener("renderingtype_changed", () => {
    infoWindow.setContent(`${map.getRenderingType()}`);
  });
}

window.initMap = initMap;index.js

WebGL レンダリングコンテキストを使用して、WebGL 2 のサポート状況を確認することもできます。

const canvas = document.createElement("canvas");
canvas.getContext("webgl2") ? console.log("WebGL 2 is supported") : console.log("WebGL 2 is NOT supported");

他の方法については、プログラムを使って WebGL レンダリングコンテキストを検出する方法についての記事をご覧ください。

モバイルウェブのサポート

モバイルウェブ向けのベクター地図はまだ試験運用中です。クライアント API を使用して、モバイルウェブブラウザを検出し、ベクター地図と関連するマップ ID をラスター地図と関連するマップ ID で代用することもご検討ください。一部のモバイルデバイスではレンダリングパフォーマンスが低下することが予想されます。モバイルウェブでベクター地図を使用する場合は、パフォーマンスの統計情報やフィードバックをお送りいただけると非常に助かります。上記のように、ベクター地図に対応していない場合、ベクター地図のマップ ID は自動的にラスター地図を使用するようフォールバックされます。

バグの報告

バグを報告する前に、ブラウザと GPU ドライバを最新のバージョンに更新してください。
ブラウザの設定でハードウェアアクセラレーションがオンになっている必要があります。Chrome の場合は chrome://settings/system で、Firefox の場合は about:preferences#general で、Microsoft Edge の場合は edge://settings/system で設定を確認しましょう。Safari の場合、macOS のバージョンが 10.15 以降であれば、この設定は自動的にオンになっています。それより前のバージョンの macOS の場合は、Safari の詳細設定で、ハードウェアアクセラレーションを使用する設定がオンになっていることを確認してください。
バグレポートに JSFiddle サンプルコードのリンクを含めてください。
レンダリングに関する問題が発生した場合、Chrome の場合は chrome://gpu、Firefox の場合は about:support、Microsoft Edge の場合は edge://gpu のスクリーンショットと、GPU 関連の情報もバグレポートに追加してください。

ご意見をお寄せください

お寄せいただいたご意見は、ベクター地図の改善に役立てさせていただきます。次のような場合はお知らせください。

ウェブアプリで、新しい JavaScript エラーやバグ、クラッシュが検出された場合。
ベクター地図の起動のレイテンシが、ラスター地図よりも著しく悪化した場合。その場合は、起動のレイテンシの回帰の指標が非常に有用です。一般的に、起動のレイテンシが許容可能なしきい値を超えているかどうかを確かめる必要があります。
ベクター地図をスムーズに操作できない場合。FPS 指標やジャンク指標を記録している場合は、ベクター地図とラスター地図間でそうした指標を比較してください。
パフォーマンスがブラウザによって大きく異なる場合。

ベクター地図とラスター地図を比較する A/B テストを設定している場合は、パフォーマンスに関するフィードバックをお寄せください。機能の改良に役立てさせていただきます。