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 contrôlez 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. Chaque style personnalisé que vous créez est associé à un ID de carte. 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 remplacer la couleur des icônes et du texte des fonctionnalités de loisirs par l'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éez 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éez un style de carte basé dans le cloud. Vous devez sélectionner "3D Hybrid" et utiliser le "mode clair" lors de cette étape.
3 Associez votre style de carte à une carte. Associez votre style à l'ID de carte que vous avez créé à l'étape 1.
4 Ajoutez l'ID de carte à votre application. Spécifiez l'ID de carte dans votre code à l'aide du paramètre map-id.
5 Publiez 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 une fois la carte instanciée. 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

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

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