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. Cette technologie Web 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 : possibilité d'ajouter du contenu 3D avec la vue en superposition WebGL, commande programmatique d'inclinaison et de rotation, commande de caméra améliorée, zoom fractionnaire pour plus de fluidité, etc.
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');
}
});