Référence JSON pour les styles de cartes basés dans le cloud

Sélectionnez une plate-forme : Android Android 3D iOS iOS 3D JavaScript Service Web

Le schéma JSON pour les styles de cartes basés dans le cloud vous permet d'utiliser JSON pour personnaliser les cartes comme vous le feriez avec l'interface de l'éditeur de style. Ce document décrit le schéma JSON et explique comment effectuer des déclarations de style JSON.

Télécharger le schéma JSON

Pour savoir comment modifier un style de carte à l'aide de JSON dans l'éditeur de style, ou comment importer et exporter un style de carte, consultez Utiliser JSON avec les styles de cartes basés dans le cloud.

Afficher un exemple de déclaration de style JSON

La déclaration de style JSON suivante définit une couleur d'arrière-plan, puis définit des styles pour les points d'intérêt, les parcs et les plans d'eau, et masque les libellés des lieux de restauration.


{
  "variant": "light",
  "styles": [
    {
      "id": "natural.land",
      "geometry": {
        "fillColor": "#f7e3f7"
      }
    },
    {
      "id": "natural.water",
      "geometry": {
        "fillColor": "#d4b2ff"
      },
      "label": {
        "textFillColor": "#3d2163",
        "textStrokeColor": "#f0e1ff"
      }
    },
    {
      "id": "pointOfInterest",
      "label": {
        "pinFillColor": "#e0349a",
        "textFillColor": "#a11e6e",
        "textStrokeColor": "#ffd9f0"
      }
    },
    {
      "id": "pointOfInterest.emergency.hospital",
      "geometry": {
        "fillColor": "#ffe3e3"
      }
    },
    {
      "id": "pointOfInterest.foodAndDrink",
      "label": {
        "visible": false
      }
    },
    {
      "id": "pointOfInterest.recreation.park",
      "geometry": {
        "fillColor": "#f9b9d2"
      }
    }
  ]
}

L'objet JSON

Une déclaration de style JSON se compose d'un objet de niveau supérieur et d'un tableau de règles de style.

  • Propriétés de premier niveau (facultatif) : paramètres de style globaux tels que backgroundColor et variant.
  • styles : tableau d'objets de règles de style, qui peuvent se composer des éléments suivants :
    • id : élément cartographique à sélectionner pour cette modification de style (par exemple, pointOfInterest.recreation.park).
    • geometry (facultatif) : éléments géométriques de l'élément cartographique et règles de style à appliquer (par exemple, fillColor).
    • label (facultatif) : libellé du texte ou du repère de l'élément cartographique et règles de style à appliquer (par exemple, textStrokeColor).

Propriétés de niveau supérieur

Les propriétés du tableau suivant s'appliquent à l'ensemble du style de carte.

Propriété Type Description Exemple

backgroundColor

Chaîne Personnalisez la couleur d'arrière-plan de l'application cartographique à l'aide d'une chaîne hexadécimale #RRGGBB. Ce paramètre n'est pas compatible avec les modifications de l'opacité. "#002211"

variant

"light"|"dark" Spécifiez le mode clair ou sombre. Si aucune valeur n'est spécifiée, la valeur par défaut est "light" (clair). "light"

monochrome

booléen Pour activer le mode monochrome, utilisez true pour afficher une version grise de la carte.

true

metadata

objet Données clé-valeur arbitraires incluses dans la définition du style. Vous pouvez utiliser ce champ pour inclure du contenu non lié au style. Ces données ne sont pas envoyées aux clients Maps tels que le SDK JavaScript Maps.

{"author": "me", "date": "2026-04-27"}

Objets de règle de style

Cette section décrit les propriétés qui définissent les objets de règle de style dans le tableau styles pour personnaliser les éléments de la carte. Chaque objet de règle de style doit se composer des éléments suivants :

  • Propriété id.
  • Élément geometry ou label avec les propriétés de styleur associées définies.

id (élément cartographique)

La propriété id spécifie l'élément cartographique à styliser. Les noms de propriétés sont des versions en camelcase des noms d'éléments cartographiques dans l'éditeur de style.

Les éléments cartographiques forment une arborescence de catégories. Si vous spécifiez un type d'élément parent, comme pointOfInterest, les styles que vous spécifiez pour le parent s'appliquent à tous ses enfants, comme pointOfInterest.retail et pointOfInterest.lodging. Pour en savoir plus, consultez Hiérarchie des éléments cartographiques.

Liste des propriétés id disponibles

Voici les propriétés id disponibles :

  • pointOfInterest
  • pointOfInterest.emergency
  • pointOfInterest.emergency.fire
  • pointOfInterest.emergency.hospital
  • pointOfInterest.emergency.pharmacy
  • pointOfInterest.emergency.police
  • pointOfInterest.entertainment
  • pointOfInterest.entertainment.arts
  • pointOfInterest.entertainment.casino
  • pointOfInterest.entertainment.cinema
  • pointOfInterest.entertainment.historic
  • pointOfInterest.entertainment.museum
  • pointOfInterest.entertainment.themePark
  • pointOfInterest.entertainment.touristAttraction
  • pointOfInterest.foodAndDrink
  • pointOfInterest.foodAndDrink.bar
  • pointOfInterest.foodAndDrink.cafe
  • pointOfInterest.foodAndDrink.restaurant
  • pointOfInterest.foodAndDrink.winery
  • pointOfInterest.landmark
  • pointOfInterest.lodging
  • pointOfInterest.recreation
  • pointOfInterest.recreation.beach
  • pointOfInterest.recreation.boating
  • pointOfInterest.recreation.fishing
  • pointOfInterest.recreation.golfCourse
  • pointOfInterest.recreation.hotSpring
  • pointOfInterest.recreation.natureReserve
  • pointOfInterest.recreation.park
  • pointOfInterest.recreation.peak
  • pointOfInterest.recreation.sportsComplex
  • pointOfInterest.recreation.sportsField
  • pointOfInterest.recreation.trailhead
  • pointOfInterest.recreation.zoo
  • pointOfInterest.retail
  • pointOfInterest.retail.grocery
  • pointOfInterest.retail.shopping
  • pointOfInterest.service
  • pointOfInterest.service.atm
  • pointOfInterest.service.bank
  • pointOfInterest.service.carRental
  • pointOfInterest.service.evCharging
  • pointOfInterest.service.gasStation
  • pointOfInterest.service.parkingLot
  • pointOfInterest.service.postOffice
  • pointOfInterest.service.restStop
  • pointOfInterest.service.restroom
  • pointOfInterest.transit
  • pointOfInterest.transit.airport
  • pointOfInterest.other
  • pointOfInterest.other.bridge
  • pointOfInterest.other.cemetery
  • pointOfInterest.other.government
  • pointOfInterest.other.library
  • pointOfInterest.other.military
  • pointOfInterest.other.placeOfWorship
  • pointOfInterest.other.school
  • pointOfInterest.other.townSquare
  • political
  • political.countryOrRegion
  • political.border
  • political.reservation
  • political.stateOrProvince
  • political.city
  • political.sublocality
  • political.neighborhood
  • political.landParcel
  • infrastructure
  • infrastructure.building
  • infrastructure.building.commercial
  • infrastructure.businessCorridor
  • infrastructure.roadNetwork
  • infrastructure.roadNetwork.noTraffic
  • infrastructure.roadNetwork.noTraffic.pedestrianMall
  • infrastructure.roadNetwork.noTraffic.trail
  • infrastructure.roadNetwork.noTraffic.trail.paved
  • infrastructure.roadNetwork.noTraffic.trail.unpaved
  • infrastructure.roadNetwork.parkingAisle
  • infrastructure.roadNetwork.ramp
  • infrastructure.roadNetwork.road
  • infrastructure.roadNetwork.road.arterial
  • infrastructure.roadNetwork.road.highway
  • infrastructure.roadNetwork.road.local
  • infrastructure.roadNetwork.road.noOutlet
  • infrastructure.roadNetwork.roadShield
  • infrastructure.roadNetwork.roadSign
  • infrastructure.roadNetwork.roadDetail
  • infrastructure.roadNetwork.roadDetail.surface
  • infrastructure.roadNetwork.roadDetail.crosswalk
  • infrastructure.roadNetwork.roadDetail.sidewalk
  • infrastructure.roadNetwork.roadDetail.intersection
  • infrastructure.railwayTrack
  • infrastructure.railwayTrack.commercial
  • infrastructure.railwayTrack.commuter
  • infrastructure.transitStation
  • infrastructure.transitStation.bicycleShare
  • infrastructure.transitStation.busStation
  • infrastructure.transitStation.ferryTerminal
  • infrastructure.transitStation.funicularStation
  • infrastructure.transitStation.gondolaStation
  • infrastructure.transitStation.monorail
  • infrastructure.transitStation.railStation
  • infrastructure.transitStation.railStation.subwayStation
  • infrastructure.transitStation.railStation.tramStation
  • infrastructure.urbanArea
  • natural
  • natural.continent
  • natural.archipelago
  • natural.island
  • natural.land
  • natural.land.landCover
  • natural.land.landCover.crops
  • natural.land.landCover.dryCrops
  • natural.land.landCover.forest
  • natural.land.landCover.ice
  • natural.land.landCover.sand
  • natural.land.landCover.shrub
  • natural.land.landCover.tundra
  • natural.water
  • natural.water.ocean
  • natural.water.lake
  • natural.water.river
  • natural.water.other
  • natural.base

Éléments

Les éléments sont des subdivisions d'un élément cartographique. Par exemple, une route se compose d'une ligne graphique (la geometry) sur la carte et du texte qui indique son nom (le label).

Les éléments suivants sont disponibles, mais notez qu'il est possible qu'un élément cartographique spécifique prenne en charge tous, certains ou aucun des éléments suivants :

  • geometry : sélectionne tous les éléments géométriques (par exemple, polygone ou polyligne) de l'élément cartographique spécifié.
  • label : sélectionne tous les éléments de libellé (par exemple, le texte et l'épingle) de l'élément cartographique spécifié.

Stylers

Les stylers vous permettent de définir vos règles de style pour chaque élément d'un élément cartographique.

Par exemple, pour une emprise au sol, vous pouvez définir le style de chaque élément comme suit :

Exemple de styles geometry pour un bâtiment Exemple de styles label pour un bâtiment
Indique si le polygone d'empreinte au sol du bâtiment doit être masqué ou affiché sur la carte. Indique s'il faut masquer ou afficher le libellé du bâtiment.
Couleur et opacité de remplissage du polygone. Couleur et opacité de remplissage du texte.
Couleur, opacité et largeur de la bordure Couleur et opacité du trait du texte

Cette section décrit les différentes options de style disponibles pour les éléments geometry et label.

Stylers geometry

Le tableau suivant liste tous les stylers géométriques disponibles.

Styler Type Description

visible

booléen Pour masquer le polygone ou la polyligne d'un élément cartographique, définissez la valeur sur false.

fillColor

chaîne Personnalisez la couleur du polygone ou de la polyligne avec une chaîne hexadécimale RVB.

fillOpacity

float Personnalisez l'opacité du polygone ou de la polyligne, où 0 correspond à transparent et 1 à opaque.

strokeColor

chaîne Personnalisez la couleur du contour avec une chaîne hexadécimale RVB.

strokeOpacity

float Personnalisez l'opacité du contour, où 0 correspond à transparent et 1 à opaque.

strokeWeight

float Personnalisez l'épaisseur du contour (de 0 à 8).

Pour en savoir plus, consultez Polygones et polylignes.

Stylers label

Le tableau suivant répertorie tous les stylers de libellés disponibles.

Styler Type Description

visible

booléen Pour masquer le libellé d'un élément cartographique, définissez-le sur false.

textFillColor

chaîne Personnalisez la couleur du libellé de texte avec une chaîne hexadécimale RVB.

textFillOpacity

float Personnalisez l'opacité du libellé de texte, où 0 correspond à transparent et 1 à opaque.

textStrokeColor

chaîne Personnalisez la couleur du contour avec une chaîne hexadécimale RVB.

textStrokeOpacity

float Personnalisez l'opacité du contour, où 0 correspond à transparent et 1 à opaque.

textStrokeWeight

float Personnalisez l'épaisseur du contour (de 0 à 8).

pinFillColor

chaîne Personnalisez la couleur du repère avec une chaîne hexadécimale RVB.

pinGlyphColor

chaîne Personnalisez la couleur du glyphe (icône) dans un repère à l'aide d'une chaîne hexadécimale RVB.

pinOutlineColor

chaîne Personnalisez la couleur du contour du repère avec une chaîne hexadécimale RVB.

Pour en savoir plus, consultez Icônes et libellés de texte.

Keyzooms

Vous pouvez définir un style unique pour une caractéristique pour tous les niveaux de keyzoom ou spécifier différents styles pour différents niveaux de keyzoom. Si vous ne fournissez qu'un seul style, il sera utilisé pour tous les niveaux de zoom clés à partir de z0. Si vous fournissez des styles pour différents niveaux de zoom, le style s'appliquera à partir de ce niveau de zoom jusqu'au prochain que vous avez défini.

Pour définir un niveau de zoom clé pour un style, définissez le niveau de zoom clé de z0 à z22 dans la propriété de style, puis personnalisez le style.

Dans l'exemple suivant, la couleur de l'eau est noire pour les niveaux de zoom clés 0 à 5, gris foncé pour les niveaux de zoom clés 6 à 11 et gris clair à partir du niveau de zoom clé 12.

{
  "id": "natural.water",
  "geometry": {
    "fillColor": {
      "z0": "#000000",
      "z6": "#666666",
      "z12": "#cccccc"
    }
  }
}

Pour en savoir plus, consultez Appliquer un style aux niveaux de zoom.

Limites

Vous pouvez utiliser JSON pour styliser presque tous les éléments de la console Google Cloud, à l'exception des options suivantes du menu Paramètres de la carte :

Ces options au niveau de la carte nécessitent une nouvelle récupération des données des tuiles pour s'afficher correctement, ce qui peut être indésirable pour certains cas d'utilisation.

Pour ces options, vous devez sélectionner votre préférence dans le menu Paramètres de la carte.

Étant donné que ces options ne sont pas incluses dans les styles exportés, elles doivent être resélectionnées dans la console Google Cloud lors de l'importation d'un style.