Cartes vectorielles

L'API Maps JavaScript propose deux implémentations de carte différentes : la carte matricielle et la carte vectorielle. La carte matricielle est utilisée par défaut. Elle charge une grille de tuiles d'images matricielles basées sur des pixels, qui sont générées par Google Maps Platform côté serveur, puis diffusées dans votre application Web. La carte vectorielle est composée de tuiles basées sur des vecteurs, 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 sur l'appareil de l'utilisateur pour afficher des graphismes en 2D et en 3D.

La carte vectorielle est la même carte Google que celle que vos utilisateurs connaissent. Elle offre de nombreux avantages par rapport à la carte matricielle par défaut, par exemple en ce qui concerne la netteté des images vectorielles et l'ajout de bâtiments 3D à des niveaux de zoom rapprochés. La carte vectorielle est également compatible avec de nouvelles fonctionnalités telles que la possibilité d'ajouter du contenu 3D avec la vue en superposition WebGL, la commande d'inclinaison et de direction programmatique, la commande de caméra améliorée et le zoom fractionnaire pour un zoom plus fluide.

Premiers pas avec les cartes vectorielles

Contrôler la caméra

Utilisez la fonction map.moveCamera() pour mettre à jour simultanément n'importe quelle combinaison de propriétés de la caméra. map.moveCamera() accepte un seul paramètre contenant toutes les propriétés de la caméra à mettre à jour. L'exemple suivant montre comment appeler map.moveCamera() pour définir simultanément center, zoom, heading et tilt :

map.moveCamera({
  center: new google.maps.LatLng(37.7893719, -122.3942),
  zoom: 16,
  heading: 320,
  tilt: 47.5
});

Vous pouvez animer les propriétés de la caméra en appelant map.moveCamera() avec une boucle d'animation, comme indiqué ci-dessous :

const degreesPerSecond = 3;

function animateCamera(time) {
  // Update the heading, leave everything else as-is.
  map.moveCamera({
    heading: (time / 1000) * degreesPerSecond
  });

  requestAnimationFrame(animateCamera);
}

// Start the animation.
requestAnimationFrame(animateCamera);

Zoom fractionnaire

Les cartes vectorielles prennent en charge le zoom fractionnaire, qui vous permet d'effectuer un zoom en utilisant des valeurs fractionnaires au lieu d'entiers. Les cartes matricielles comme vectorielles sont compatibles avec le zoom fractionnaire, mais il est activé par défaut seulement dans les cartes vectorielles, et non dans les cartes matricielles. Utilisez l'option de carte isFractionalZoomEnabled pour activer et désactiver le zoom fractionnaire.

L'exemple suivant montre comment activer le zoom fractionnaire lors de l'initialisation de la carte :

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

Vous pouvez également activer ou désactiver le zoom fractionnaire en définissant l'option de carte isFractionalZoomEnabled, comme indiqué ci-dessous :

// Using map.set
map.set('isFractionalZoomEnabled', true);

// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});

Vous pouvez configurer un écouteur pour détecter si le zoom fractionnaire est activé. C'est utile si vous n'avez pas défini explicitement isFractionalZoomEnabled sur true ou false. L'exemple de code suivant vérifie si le zoom fractionnaire est activé :

map.addListener('isfractionalzoomenabled_changed', () => {
  const isFractionalZoomEnabled = map.get('isFractionalZoomEnabled');
  if (isFractionalZoomEnabled === false) {
    console.log('not using fractional zoom');
  } else if (isFractionalZoomEnabled === true) {
    console.log('using fractional zoom');
  } else {
    console.log('map not done initializing yet');
  }
});