Aperçu

Les cartes 3D dans Maps JavaScript vous aident à créer des expériences de cartes 3D immersives. Il fournit des outils pour personnaliser le style des cartes, améliorer l'accessibilité et l'ergonomie, et développer des applications attrayantes et interactives.

Voici un exemple de ce que vous pouvez faire avec les cartes 3D dans l'API Maps JavaScript :

Pourquoi utiliser 3D Maps dans Maps JavaScript ?

Dans Maps JavaScript, les cartes 3D fournissent la classe Map3DElement (<gmp-map-3d>) dans la bibliothèque maps3d pour vous permettre d'utiliser les images 3D de Google dans vos applications. Les cartes 3D offrent une expérience de rendu 3D intégrée, qui vous permet d'incorporer ou de tester des environnements réels, des vues de villes et des visites de monuments en 3D.

Utilisez la 3D <gmp-map-3d> (Map3DElement dans la bibliothèque maps3d) pour les terrains en 3D, l'inclinaison de la caméra, le cap et les survols, les bâtiments 3D extrudés et les objets 3D tels que Marker3DElement (<gmp-marker-3d>). Pour les cartes routières 2D plates, les repères 2D standards AdvancedMarkerElement et le style vectoriel 2D, utilisez la 2D <gmp-map> (MapElement ou google.maps.Map dans la bibliothèque maps).

Que pouvez-vous faire avec les cartes 3D dans Maps JavaScript ?

• Créez des expériences de cartographie réalistes : affichez des images aériennes 3D photoréalistes de villes, de terrains et de points de repère en mode SATELLITE ou HYBRID (qui superpose les libellés du fond de carte sur les images satellite), ou affichez un fond de carte 3D stylisé en mode ROADMAP à l'aide de la propriété mode. Pour en savoir plus, consultez Changer de mode Plan.
• Personnalisez le style de la carte :
  • Styles de cartes 3D basés dans le cloud : contrôlez la visibilité et le style des points d'intérêt (POI) et des routes de la carte de base. Pour en savoir plus, consultez Personnaliser les cartes 3D.
  • Repères, popovers, polylignes et polygones personnalisés : identifiez des lieux et dessinez des itinéraires ou des limites en 3D sur la carte à l'aide de MarkerElement, Marker3DElement, Marker3DInteractiveElement, PopoverElement, Polyline3DElement et Polygon3DElement. Pour en savoir plus, consultez Repères, Popovers, et Formes et lignes.
  • Modèles 3D et éléments glTF : ajoutez des modèles 3D glTF PBR personnalisés de bâtiments, de points de repère ou d'objets à des coordonnées réelles à l'aide de Model3DElement. Pour en savoir plus, consultez Modèles.
• Créez des cartes immersives :
  • Trajectoires de caméra prédéfinies : guidez les utilisateurs sur votre carte 3D avec des survols de caméra et des animations orbitales prédéfinis à l'aide de flyCameraTo et flyCameraAround. Pour en savoir plus, consultez Animer les trajectoires de la caméra.
  • Contrôler l'interaction des utilisateurs : personnalisez les commandes et les mouvements de la caméra disponibles pour vos utilisateurs. Pour en savoir plus, consultez Commandes et exploration des cartes 3D, Limiter la vue et les limites de la caméra et Contrôler la position de la caméra.

Exemple rapide

Pour charger la bibliothèque maps3d et afficher un élément <gmp-map-3d> avec mode="HYBRID", center (lat,lng,altitude), range, tilt et heading, utilisez l'extrait de code suivant :

<gmp-map-3d
  style="height: 400px; width: 100%;"
  mode="HYBRID"
  center="40.7484,-73.9857,200"
  range="900"
  tilt="67"
  heading="35">
</gmp-map-3d>
<script async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&libraries=maps3d">
</script>

Remplacez YOUR_API_KEY par votre clé API Google Maps Platform.

Utiliser 3D Maps dans Maps JavaScript

Couverture

Les maillages de bâtiments et de points de repère 3D photoréalistes sont disponibles dans certaines zones métropolitaines des pays et régions compatibles. Dans les régions sans couverture de maillage 3D (comme l'Inde), <gmp-map-3d> affiche des images satellite ou de carte routière 2D drapées sur l'élévation du terrain 3D sans bâtiments 3D extrudés. Pour mettre en avant un point de repère dans une zone sans couverture de maillage 3D, vous pouvez placer un modèle 3D glTF personnalisé à ses coordonnées à l'aide de Model3DElement ou utiliser un <gmp-map> 2D. Pour connaître la disponibilité par pays (dans la colonne Maps JavaScript 3D), consultez Détails de la couverture Google Maps Platform.

Étapes suivantes

• Consultez le guide de démarrage pour créer une carte 3D "Hello, World!".
• Suivez l'atelier de programmation d'introduction pour découvrir comment ajouter des fonctionnalités à la carte.
• Approfondissez vos connaissances sur les repères et l'animation dans le prochain atelier de programmation.
• Parcourez la collection d'exemples de Google pour en trouver un adapté à votre cas d'utilisation.