Assistenza

In questa pagina sono elencati i problemi noti e le soluzioni alternative per le mappe vettoriali e le funzionalità WebGL.

Supporto di browser/dispositivi

L'anteprima della funzionalità WebGL supporta gli stessi browser e dispositivi dell'API Maps JavaScript. Per verificare se il browser su un determinato dispositivo supporta WebGL, visita il sito get.webgl.org o caniuse.com. Assicurati inoltre che l'accelerazione hardware sia attivata nelle impostazioni del browser, altrimenti le mappe vettoriali verranno ripristinate al formato raster.

Raster o vettoriale?

A volte, una mappa vettoriale può tornare al raster. In questi casi, gli elementi che dipendono dalla mappa vettoriale non sono disponibili. Il fallback di una mappa raster può avvenire per diversi motivi. Questa sezione mostra come configurare correttamente il browser web e come verificare in modo programmatico se sono presenti funzionalità delle mappe vettoriali.

Verificare le funzionalità del browser su Chrome

Per determinare quali funzionalità di accelerazione hardware sono attive in un'installazione specifica di Chrome, vai alla pagina chrome://gpu/ e assicurati che i seguenti elementi siano abilitati (in verde):

  • "OpenGL: abilitato"
  • "WebGL: con accelerazione hardware"
  • "WebGL2: con accelerazione hardware"

(Si tratta solo di requisiti di base, ci possono essere altri fattori che influiscono sull'assistenza; consulta la sezione "Bug noti" di seguito).

Attiva accelerazione hardware

Per supportare le mappe vettoriali, l'accelerazione hardware deve essere abilitata nella maggior parte dei browser. Per attivare l'accelerazione hardware in Chrome e Microsoft Edge, apri le Impostazioni, seleziona Sistema e assicurati che l'opzione Usa accelerazione hardware quando disponibile sia attivata.

Controlla in modo programmatico la presenza di raster o vettori

Puoi controllare in modo programmatico se una mappa è raster o vettoriale chiamando map.getRenderingType(). L'esempio seguente mostra il codice per monitorare l'evento renderingtype_changed e mostra una finestra informativa che mostra se una mappa raster o vettoriale è in uso.

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

Puoi anche utilizzare il contesto del rendering WebGL per verificare il supporto di WebGL 2:

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

Scopri altri modi per rilevare in modo programmatico il contesto del rendering WebGL.

Supporto Web mobile

Il supporto per il web mobile per le mappe vettoriali è ancora sperimentale. Gli sviluppatori possono utilizzare API client per rilevare i browser web mobile e utilizzare un ID mappa associato a una mappa raster anziché a una mappa vettoriale. Prevediamo che il rendering sia più lento per alcuni dispositivi mobili. Se scegli di utilizzare mappe vettoriali sul web mobile, apprezzeremmo molto le statistiche sul rendimento e i feedback. Come indicato in precedenza, se il supporto per le mappe vettoriali non è disponibile, un ID mappa vettoriale utilizzerà automaticamente una mappa raster.

Bug

Bug noti

  • Si è verificato un problema noto in Chrome su alcuni dispositivi macOS con GPU AMD. Ciò può creare particolarmente confusione quando macOS passa in modo dinamico da una GPU all'altra su dispositivi con più GPU, pertanto le mappe vettoriali potrebbero non essere disponibili a seconda di quali altre app sono in esecuzione o del fatto che sia connesso un monitor esterno. Sembra che in alcuni casi l'attivazione del backend ANGLE Metal di Chrome possa risolvere il problema. Puoi seguire i piani di implementazione generali di questa funzionalità all'indirizzo https://bugs.chromium.org/p/chromium/issues/detail?id=1322521.

Segnalazione di bug

  • Aggiorna il browser e il driver GPU alla versione più recente prima di segnalare il bug.
  • Assicurati che l'impostazione di accelerazione hardware su chrome://settings/system (Chrome), about:preferences#general (Firefox), edge://settings/system (Microsoft Edge) sia attivata. In Safari, questa impostazione viene attivata automaticamente in macOS 10.15 o versioni successive. Per le versioni precedenti di MacOS, vai alle impostazioni avanzate di Safari e assicurati che l'opzione "Usa accelerazione hardware" sia attivata.
  • Includi il link al codice di esempio jsfiddle nella segnalazione di bug.
  • Acquisisci anche uno screenshot di chrome://gpu (Chrome), about:support (Firefox) o edge://gpu (Microsoft Edge), allega le informazioni relative alla GPU nella segnalazione di bug se riscontri problemi di rendering.

Aspettiamo commenti e suggerimenti!

Il tuo feedback è importante per noi e ci impegniamo per offrire la migliore esperienza di utilizzo delle mappe vettoriali per te e i tuoi utenti finali. Facci sapere se:

  • Sono presenti nuovi errori JavaScript o bug/arresti anomali che hai rilevato nelle tue app web.
  • La latenza di avvio per le mappe vettoriali è notevolmente inferiore a quella per le mappe raster. In questo caso, le metriche per la regressione della latenza di avvio sono molto utili. In generale, vogliamo sapere se la latenza di avvio regredisce oltre le soglie accettabili.
  • L'esperienza delle mappe vettoriali non è così fluida come potrebbe essere. Se registri le metriche FPS o jank, come confrontarle tra mappe vettoriali e raster?
  • Le prestazioni variano notevolmente in base al browser.

Se hai configurato il test A/B per un confronto tra mappe vettoriali e mappe raster, condividi eventuali feedback sul rendimento che acquisisci, poiché saranno molto utili per aiutarci a perfezionare la funzionalità.