Personnaliser les cartes 3D

Vous pouvez personnaliser l'apparence de la carte de base 3D à l'aide des styles de cartes basés 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 éléments, 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 de modification sans code dans la console Google Cloud. Chaque style personnalisé que vous créez est associé à un ID de carte. Les modifications apportées à votre style dans la console Maps s'afficheront automatiquement dans votre application.

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

async function init() {
    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', // Styles are associated with map IDs.
        mode: 'HYBRID',
    });

    document.body.append(map);
}

void init();

Présentation

Le processus de personnalisation des cartes 3D à l'aide des styles de cartes basés dans le cloud est le 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 l'application de styles. Vous associerez un style personnalisé à cet ID de carte lors des étapes suivantes.
2 Créer un style de carte basé dans le cloud Sélectionnez "Feuille de route 3D" (compatible avec les modes clair et sombre) ou "Hybride 3D" (compatible avec le mode clair) à 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.

Mettre à jour l'ID de carte de manière dynamique

Vous pouvez mettre à jour la propriété mapId de manière dynamique après l'instanciation de la carte. Cela vous permet d'appliquer un autre style de carte basé dans le cloud sans avoir à recréer l'intégralité de l'instance Map3DElement.

Pour mettre à jour l'ID de carte, définissez la propriété mapId sur l'instance Map3DElement :

const map3DElement = document.querySelector('gmp-map-3d');

// Update the map ID dynamically
map3DElement.mapId = 'YOUR_MAP_ID';

Étant donné que la propriété mapId est reflétée dans l'attribut HTML, vous pouvez également la mettre à jour de manière dynamique en modifiant l'attribut :

const map3DElement = document.querySelector('gmp-map-3d');

// Alternatively, set the map-id attribute
map3DElement.setAttribute('map-id', 'YOUR_MAP_ID');

Limites

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

  • Le mode sombre n'est compatible qu'avec le mode ROADMAP (les modes HYBRID et SATELLITE ne sont pas compatibles avec le mode sombre).
  • Les fonctionnalités activées par ID de carte, comme le style basé sur les données, ne sont pas prises en charge.