Assistance

Cette page liste les problèmes connus et les solutions de contournement pour les cartes vectorielles et les éléments cartographiques WebGL.

Compatibilité avec les navigateurs et appareils

L'aperçu des fonctionnalités WebGL est compatible avec les mêmes navigateurs et appareils que l'API Maps JavaScript. Pour vérifier si le navigateur d'un appareil est compatible avec WebGL, consultez get.webgl.org ou caniuse.com. Vérifiez également que l'accélération matérielle est activée dans les paramètres du navigateur, sans quoi une carte matricielle s'affichera à la place de la carte vectorielle.

Carte matricielle et carte vectorielle

Parfois, une carte matricielle peut s'afficher à la place d'une carte vectorielle. Dans ce cas, les éléments cartographiques dépendant de la carte vectorielle ne sont pas disponibles. L'affichage d'une carte matricielle peut se produire pour diverses raisons. Cette section vous explique comment configurer correctement votre navigateur Web et vérifier de manière programmatique si les cartes vectorielles sont fonctionnelles.

Vérifier les fonctionnalités du navigateur Chrome

Pour déterminer quelles fonctionnalités d'accélération matérielle sont activées dans une installation spécifique de Chrome, accédez à chrome://gpu/ et assurez-vous que les éléments suivants sont activés (en vert) :

  • "OpenGL : activé"
  • "WebGL : accélération matérielle"
  • "WebGL2 : accélération matérielle"

Il s'agit d'exigences de base. Toutefois, la compatibilité peut être affectée par d'autres facteurs. Consultez "Bugs connus" ci-dessous.

Activer l'accélération matérielle

Pour que les cartes vectorielles soient compatibles, l'accélération matérielle doit être activée dans la plupart des navigateurs. Pour activer l'accélération matérielle dans Chrome et Microsoft Edge, accédez aux paramètres, sélectionnez Système et assurez-vous que l'option Utiliser l'accélération matérielle si disponible est activée.

Vérification programmatique des cartes matricielles et vectorielles

Vous pouvez vérifier si une carte est matricielle ou vectorielle de manière programmatique, en appelant map.getRenderingType(). L'exemple de code ci-dessous permet de surveiller l'événement renderingtype_changed et d'afficher une fenêtre d'informations indiquant si une carte matricielle ou vectorielle est utilisée.

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

Vous pouvez également utiliser le contexte de rendu WebGL pour vérifier la compatibilité avec WebGL 2 :

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

Découvrez d'autres manières de détecter de manière programmatique le contexte de rendu WebGL.

Compatibilité avec le Web mobile

La compatibilité des cartes vectorielles avec le Web mobile est encore au stade expérimental. Les développeurs peuvent utiliser des API clientes pour détecter les navigateurs Web mobiles et utiliser un ID de carte associé à une carte matricielle plutôt qu'à une carte vectorielle. Nous estimons que l'affichage sera plus lent sur certains appareils mobiles. Si vous choisissez d'utiliser des cartes vectorielles sur le Web mobile, n'hésitez pas à nous faire part de vos commentaires et de vos statistiques sur les performances. Comme indiqué ci-dessus, l'ID de carte vectorielle basculera automatiquement vers une carte matricielle en cas d'incompatibilité.

Bugs

Bugs connus

  • Il existe un problème connu dans Chrome sur certains appareils macOS équipés de GPU AMD. Ce problème peut particulièrement prêter à confusion lorsque macOS bascule d'un GPU à l'autre sur les appareils qui en ont plusieurs. Par conséquent, les cartes vectorielles ne seront peut-être pas disponibles si d'autres applications sont en cours d'exécution, ou si un écran externe est branché. Dans certains cas, activer le backend ANGLE Metal, bientôt disponible, semble résoudre le problème. Suivez les plans de déploiement généraux à l'adresse https://bugs.chromium.org/p/chromium/issues/detail?id=1322521.

Signaler des bugs

  • Veuillez installer les dernières mises à jour du navigateur et du pilote du GPU avant de signaler le bug.
  • Vérifiez que le paramètre d'accélération matérielle chrome://settings/system (Chrome), about:preferences#general (Firefox) ou edge://settings/system (Microsoft Edge) est activé. Dans Safari, ce paramètre est activé automatiquement dans macOS 10.15 ou version ultérieure. Pour les versions antérieures de MacOS, accédez aux paramètres avancés de Safari et vérifiez que l'option "Utiliser l'accélération matérielle" est activée.
  • Incluez un lien vers l'exemple de code jsfiddle dans le rapport de bug.
  • Veuillez également prendre une capture d'écran de chrome://gpu (Chrome), de about:support (Firefox) ou de edge://gpu (Microsoft Edge), ou joindre des informations du GPU dans le rapport de bug si vous rencontrez des problèmes d'affichage.

Donnez-nous votre avis !

Vos commentaires nous sont très utiles, car ils nous permettent de proposer la meilleure expérience de cartographie vectorielle possible pour vous et vos utilisateurs finaux. Contactez-nous si :

  • vous détectez de nouvelles erreurs JavaScript, ou de nouveaux bugs ou plantages, dans vos applications Web ;
  • la latence de démarrage pour les cartes vectorielles est nettement supérieure à celle des cartes matricielles (dans ce cas, les métriques de régression de la latence du démarrage sont très utiles. En général, nous souhaitons savoir si la latence au démarrage dépasse le seuil acceptable) ;
  • l'expérience des cartes vectorielles n'est pas aussi fluide qu'elle pourrait l'être (si vous consignez des métriques concernant les FPS ou les à-coups, comparez celles des cartes vectorielles à celles des cartes matricielles) ;
  • les performances varient considérablement d'un navigateur à l'autre.

Si vous avez configuré des tests A/B pour comparer les cartes vectorielles et les cartes matricielles, veuillez nous envoyer vos commentaires sur les performances. Ils nous aideront à améliorer le produit.