Dukungan

Halaman ini mencantumkan masalah dan solusi umum untuk peta vektor dan fitur WebGL.

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 https://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. Penggantian 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: Aktif"
  • "WebGL: Hardware diakselerasi"
  • "WebGL2: Hardware diakselerasi"

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 sedang menggunakan peta raster atau vektor.

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 proses 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 proses 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 kiriman masukan dan statistik performa. Seperti halnya di atas, jika dukungan Peta Vektor tidak tersedia, ID peta vektor akan otomatis kembali menggunakan peta raster.

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 dibandingkan latensi untuk peta raster. Jika ini terjadi, metrik untuk regresi latensi pengaktifan akan sangat membantu. Secara umum, kami ingin mengetahui apakah latensi pengaktifan menurun di luar 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 di antara browser sangat berbeda.

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