お知らせ: Google Maps Platform に間もなく新しい基本地図のスタイルが導入されます。このアップデートにより、デフォルトのカラーパレットが新しくなるほか、ピンが最新化され、地図のエクスペリエンスとユーザビリティが改善されます。すべての地図のスタイルは、2025 年 3 月に自動的に更新されます。ご利用の詳細およびいち早く使用する方法については、Google Maps Platform の新しい地図のスタイルをご覧ください。

このページは Cloud Translation API によって翻訳されました。

サポート

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

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

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

ラスターかベクターか

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

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

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

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

（これらはあくまで基本要件であり、サポートに影響する他の要因がある場合があります。詳しくは、下記の「既知のバグ」をご覧ください）

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

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

Safari の場合は、「Web サイト」環境設定の変更についての説明をご覧ください。
Firefox の場合は、パフォーマンス設定についての説明をご覧ください。

ラスターかベクターかをプログラマティックに確認する

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 は自動的にラスターマップを使用するようフォールバックします。

バグ

既知のバグ

AMD GPU を搭載した一部の macOS デバイス上の Chrome には既知の問題があります。これは特に、複数の GPU が搭載されたデバイスで macOS が GPU の切り替えを動的に行うよう設定されている場合に、使用中のアプリや外部モニタの有無によってはベクターマップが使用できない事態が発生するため、混乱を招く恐れがあります。Chrome で今後提供予定の ANGLE Metal バックエンドを有効にすることで、この問題を解決できる場合があるようです。このための全般的な導入計画については、https://bugs.chromium.org/p/chromium/issues/detail?id=1322521 をご覧ください。

バグの報告

バグを報告する前に、ブラウザと 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 テストを設定している場合は、パフォーマンスに関するフィードバックをお寄せください。機能の改良に役立てさせていただきます。