Dukungan

Halaman ini mencantumkan masalah umum peta vektor dan fitur WebGL, beserta solusi alternatifnya.

Dukungan browser/perangkat

Pratinjau fitur WebGL mendukung browser dan perangkat yang sama seperti Maps JavaScript API. Untuk memeriksa apakah browser di perangkat tertentu akan mendukung WebGL, kunjungi get.webgl.org atau caniuse.com. Pastikan juga akselerasi hardware diaktifkan di setelan browser. Jika tidak, peta vektor akan dikembalikan ke raster.

Raster atau vektor?

Terkadang, peta vektor dapat kembali menjadi raster. Jika penggantian ini terjadi, fitur yang bergantung pada peta vektor tidak akan tersedia. Pengembalian ke peta raster dapat terjadi karena berbagai alasan. Bagian ini menunjukkan cara mengonfigurasi browser web dengan benar, dan cara memeriksa secara terprogram apakah kemampuan peta vektor tersedia.

Memeriksa kemampuan browser di Chrome

Untuk menentukan kemampuan akselerasi hardware mana yang diaktifkan di penginstalan Chrome tertentu, buka chrome://gpu/, dan pastikan item berikut diaktifkan (berwarna hijau):

  • "OpenGL: Enabled"
  • "WebGL: Hardware accelerated"
  • "WebGL2: Hardware accelerated"

(Ini hanyalah persyaratan dasar, mungkin ada faktor lain yang memengaruhi dukungan, lihat "Bug yang diketahui" di bawah.)

Mengaktifkan akselerasi hardware

Untuk mendukung peta vektor, akselerasi hardware harus diaktifkan di sebagian besar browser. Untuk mengaktifkan akselerasi hardware di Chrome dan Microsoft Edge, buka Setelan, pilih Sistem, dan pastikan Gunakan akselerasi hardware jika tersedia diaktifkan.

Memeriksa raster atau vektor secara terprogram

Anda bisa memeriksa secara terprogram apakah peta memiliki bentuk raster atau vektor, dengan memanggil map.getRenderingType(). Contoh berikut menunjukkan kode untuk memantau peristiwa renderingtype_changed, dan menunjukkan jendela info yang menampilkan apakah peta raster atau vektor sedang digunakan.

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

Anda juga dapat menggunakan konteks rendering WebGL guna memeriksa dukungan untuk WebGL 2:

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

Pelajari cara lain untuk mendeteksi konteks rendering WebGL secara terprogram.

Dukungan web seluler

Dukungan web seluler untuk peta vektor masih bersifat eksperimental. Developer dapat menggunakan API klien untuk mendeteksi browser web seluler dan menggunakan ID peta yang terkait dengan peta raster, bukan peta vektor. Kami mengantisipasi performa rendering yang lebih lambat untuk beberapa perangkat seluler. Jika Anda memilih untuk menggunakan peta vektor di web seluler, kami akan sangat menghargai jika Anda bersedia mengirimkan masukan dan statistik performa. Seperti halnya di atas, jika dukungan Peta Vektor tidak tersedia, ID peta vektor akan otomatis kembali menggunakan peta raster.

Bug

Bug yang diketahui

  • Ada masalah umum di Chrome pada beberapa perangkat macOS dengan GPU AMD. Hal ini dapat sangat membingungkan saat macOS secara dinamis beralih antar-GPU pada perangkat yang memiliki banyak GPU, sehingga peta vektor mungkin tidak tersedia bergantung pada aplikasi lain yang sedang berjalan, atau apakah ada monitor eksternal yang terhubung. Dalam beberapa kasus, mengaktifkan backend ANGLE Metal yang akan tersedia di Chrome tampaknya dapat memperbaiki masalah ini. Anda dapat mengikuti rencana peluncuran umum untuk mengatasi masalah ini di https://bugs.chromium.org/p/chromium/issues/detail?id=1322521.

Melaporkan bug

  • Update browser dan driver GPU ke versi terbaru sebelum melaporkan bug.
  • Pastikan setelan akselerasi hardware di chrome://settings/system (Chrome), about:preferences#general (Firefox), dan edge://settings/system (Microsoft Edge) diaktifkan. Di Safari, setelan ini diaktifkan secara otomatis di macOS versi 10.15 atau yang lebih baru. Untuk versi MacOS lama, buka setelan lanjutan Safari dan pastikan opsi "Use hardware acceleration" diaktifkan.
  • Sertakan link kode contoh jsfiddle dalam laporan bug.
  • Ambil juga screenshot chrome://gpu (Chrome), about:support (Firefox), atau edge://gpu (Microsoft Edge), lampirkan info terkait GPU dalam laporan bug jika Anda mengalami masalah rendering.

Sampaikan pendapat Anda

Kami menghargai masukan dari Anda seiring upaya kami untuk menciptakan pengalaman peta vektor terbaik bagi Anda dan pengguna akhir Anda. Harap beri tahu kami jika:

  • Terdapat bug atau error JavaScript baru yang Anda deteksi di aplikasi web.
  • Latensi pengaktifan untuk peta vektor jauh lebih buruk daripada untuk peta raster. Jika ini terjadi, kami akan sangat terbantu apabila Anda dapat memberikan metrik untuk regresi latensi pengaktifan. Secara umum, kami ingin mengetahui apakah latensi pengaktifan naik hingga melebihi batas yang dapat diterima.
  • Pengalaman peta vektor tidak selancar biasanya. Jika Anda mencatat log metrik FPS atau jank, bagaimana perbandingannya antara peta vektor dan raster?
  • Performa antar-browser sangat berbeda.

Jika Anda telah menyiapkan pengujian A/B untuk perbandingan peta vektor vs. peta raster, harap berikan masukan terkait performa yang Anda peroleh, karena masukan ini akan sangat berguna untuk membantu kami meningkatkan kualitas fitur.