Type de rendu (raster et vectoriel)

L'API Maps JavaScript propose deux implémentations de carte différentes : la carte matricielle et la carte vectorielle. La carte matricielle charge la carte sous forme de grille de tuiles d'images matricielles basées sur des pixels, qui sont générées côté serveur par Google Maps Platform, puis diffusées dans votre application Web. La carte vectorielle est composée de tuiles vectorielles, qui sont dessinées au moment du chargement côté client à l'aide de WebGL, une technologie Web qui permet au navigateur d'accéder au GPU de l'appareil de l'utilisateur pour afficher des graphiques 2D et 3D.

Le type de carte vectorielle est recommandé pour offrir la meilleure expérience utilisateur, car il offre une fidélité visuelle améliorée, une meilleure mise en cache sur les cartes, ainsi que la possibilité de contrôler l'inclinaison et la direction sur la carte. En savoir plus sur les fonctionnalités des cartes vectorielles

Type de rendu par défaut

Le type de rendu par défaut de la carte varie en fonction de votre implémentation.

  • Les cartes utilisant l'élément <gmp-map> sont définies par défaut sur le type de rendu vectoriel.

  • Les cartes utilisant un élément <div> avec google.maps.Map sont définies par défaut sur le type de rendu raster.

Définissez le type de rendu d'une carte en spécifiant l'option de carte renderingType ou en définissant l'option sur un ID de carte associé. L'option renderingType remplace tous les paramètres de type de rendu définis lors de la configuration d'un ID de carte.

Spécifiez l'option renderingType.

Utilisez l'option renderingType pour spécifier le type de rendu matriciel ou vectoriel de votre carte (aucun ID de carte n'est requis). Pour les cartes chargées à l'aide d'un élément div et de JavaScript, le type de rendu par défaut est google.maps.RenderingType.RASTER. Pour définir l'option renderingType :

  1. Chargez la bibliothèque RenderingType. Vous pouvez le faire lorsque vous chargez la bibliothèque Maps :

    const { Map, RenderingType } = await google.maps.importLibrary("maps");

  2. Lorsque vous initialisez la carte, utilisez l'option renderingType pour spécifier RenderingType.VECTOR ou RenderingType.RASTER :

    map = new Map(
  document.getElementById('map'),
  {
    zoom: 4,
    center: position,
    renderingType: RenderingType.VECTOR,
  }
);

Lorsque le type de rendu de la carte vectorielle est défini, vous devez définir les options pour les fonctionnalités nécessaires.

  • Pour activer l'inclinaison, définissez l'option de carte tiltInteractionEnabled sur true ou appelez map.setTiltInteractionEnabled(true).
  • Pour activer le déplacement, définissez l'option de carte headingInteractionEnabled sur true ou appelez map.setHeadingInteractionEnabled(true).

Pour les cartes chargées à l'aide de l'élément <gmp-map>, le type de rendu par défaut est google.maps.RenderingType.VECTOR, avec le contrôle de l'inclinaison et du cap activé. Pour définir le type de rendu à l'aide de l'élément <gmp-map>, utilisez l'attribut rendering-type.

Utiliser un ID de carte pour définir le type de rendu

Vous pouvez également spécifier le type de rendu à l'aide d'un ID de carte. Créez un ID de carte en suivant la procédure décrite dans Utiliser les styles de cartes basés dans le cloud : obtenir un ID de carte. Veillez à définir le type de carte sur JavaScript, puis sélectionnez une option (Vecteur ou Trame). Cochez Inclinaison et Rotation pour activer l'inclinaison et la rotation sur la carte. Cela vous permet d'ajuster ces valeurs de manière programmatique, et permet aux utilisateurs d'ajuster l'inclinaison et la direction directement sur la carte. Si incliner ou faire tourner la carte affecte négativement votre application, décochez Inclinaison et Rotation pour que les utilisateurs ne puissent pas ajuster ces éléments.

Créer un ID de carte vectorielle

Ensuite, mettez à jour le code d'initialisation de votre carte avec l'ID de carte que vous avez créé. Vous trouverez vos ID de carte sur la page Gestion des cartes. Indiquez un ID de carte lorsque vous instanciez la carte à l'aide de la propriété mapId, comme indiqué ci-dessous :

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID'
});

Détecter le type de rendu utilisé

Pour détecter le type de rendu utilisé, appelez getRenderingType() sur l'objet map, comme indiqué dans l'exemple suivant :

  // Wait for the map to finish loading.
  google.maps.event.addListenerOnce(map, "tilesloaded", () => {
      // Print the rendering type to the console.
      console.log(`${map.getRenderingType()}`);
  });```