Personnaliser les cartes 3D

Vous pouvez personnaliser l'apparence de la carte de base 3D à l'aide du style de carte dans le cloud.

Avec les styles de cartes basés dans le cloud, vous pouvez contrôler l'apparence de la carte que vous présentez aux utilisateurs. En contrôlant des fonctionnalités telles que la densité des points d'intérêt (POI), la suppression de certaines catégories de POI et la modification du remplissage ou du contour des fonctionnalités, vous pouvez créer une expérience cartographique adaptée à vos utilisateurs.

Les styles de cartes basés dans le cloud offrent une expérience d'édition sans code dans la console Google Cloud. Les modifications apportées à votre style dans la console Maps s'affichent automatiquement dans votre application.

L'exemple suivant montre une carte qui utilise un style personnalisé pour modifier la couleur des icônes et du texte des éléments de loisirs en orange :

async function initMap() {
    const { Map3DElement } = await google.maps.importLibrary("maps3d");
    const map = new Map3DElement({
        center: { lat: 37.75183154601466, lng: -119.52369070507672, altitude: 2200 },
        tilt: 67.5,
        heading: 108.94057782079429,
        range: 6605.57279990986,
        mapId: 'bcce776b92de1336e22c569f',
        mode: 'HYBRID',
        gestureHandling: "COOPERATIVE"
    });
    document.body.append(map);
}
initMap();
index.js

Présentation

La procédure de personnalisation des cartes 3D à l'aide des styles de cartes basés dans le cloud est la même que pour les cartes 2D :

1 Créer un ID de carte Créez un ID de carte. Les ID de carte sont transmis à votre application pour gérer le style. Vous associerez un style personnalisé à cet ID de carte lors des étapes suivantes.
2 Créer un style de carte basé dans le cloud Vous devez sélectionner "3D hybride" et utiliser le mode clair lors de cette étape.
3 Associer votre style de carte à une carte Associez votre style à l'ID de carte que vous avez créé à l'étape 1.
4 Ajouter l'ID de carte à votre application Spécifiez l'ID de carte dans votre code à l'aide du paramètre map-id.
5 Publier l'ID de carte Notez que les modifications apportées à votre style personnalisé sont automatiquement intégrées à votre application après la publication.

Pour en savoir plus sur la création de styles de carte, consultez Créer et utiliser des styles de carte.

Limites

Lorsque vous utilisez des styles de cartes basés dans le cloud avec des cartes 3D dans Maps JavaScript, vous devez tenir compte de certaines limites :

  • Le mode sombre n'est pas disponible.
  • Les fonctionnalités compatibles avec les ID de carte, comme le style basé sur les données, ne sont pas prises en charge.