Calques
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Sélectionnez une plate-forme :
Android
JavaScript
Les calques sont des objets ajoutés sur une carte. Composés d'un ou de plusieurs éléments séparés, ils sont toutefois manipulés ensemble en tant qu'unité. Les calques représentent généralement des collections d'objets que vous ajoutez au-dessus d'une carte pour désigner des associations communes. L'API Maps JavaScript gère la présentation des objets au sein des calques en affichant leurs éléments constitutifs dans un objet (généralement une superposition de tuiles) et en les affichant lorsque la fenêtre d'affichage de la carte change. Les calques peuvent également influer sur le calque de présentation de la carte elle-même, en modifiant légèrement les tuiles de base pour les rendre cohérentes avec le calque. Notez que par nature, la plupart des calques ne sont pas accessibles individuellement via leurs objets respectifs. Ils ne peuvent être manipulés qu'ensemble en tant qu'unité.
Présentation des calques
L'API Maps JavaScript comporte plusieurs types de calques :
- Le calque Google Maps Data fournit un conteneur pour les données géospatiales arbitraires.
Vous pouvez utiliser le calque Data pour stocker des données personnalisées ou pour afficher des données GeoJSON sur une carte Google.
- Le calque Heatmap affiche des données géographiques dans une carte de densité.
- Le
calque KML permet d'afficher les éléments KML et GeoRSS dans une superposition de tuiles de l'API Maps JavaScript.
- Le
calque Traffic affiche les conditions de circulation sur la carte.
- Le
calque Transit affiche le réseau de transports en commun de votre ville sur la carte.
- L'objet de
calque Bicycling affiche un calque des pistes cyclables et/ou des superpositions spécifiques aux vélos dans un calque commun. Ce calque est renvoyé par défaut dans DirectionsRenderer lorsque vous demandez un itinéraire en mode de transport À VÉLO.
Ajouter un calque
Pour ajouter un calque à une carte, il vous suffit d'appeler setMap() en lui transmettant l'objet map sur lequel afficher le calque. De même, pour masquer un calque, appelez setMap() en transmettant null.
L'extrait ci-dessous centre la carte sur Londres, au Royaume-Uni, et ajoute le calque Transit.
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(51.5,-0.11)
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/08/06 (UTC).
[null,null,["Dernière mise à jour le 2025/08/06 (UTC)."],[[["\u003cp\u003eLayers in Maps JavaScript API are objects consisting of multiple items that are treated as a single unit and often represent collections of objects on the map.\u003c/p\u003e\n"],["\u003cp\u003eThe API provides various layer types, including Data, Heatmap, KML, Traffic, Transit, and Bicycling layers, each serving a distinct purpose for displaying geospatial data.\u003c/p\u003e\n"],["\u003cp\u003eYou can easily add or hide a layer by calling the \u003ccode\u003esetMap()\u003c/code\u003e method, providing the map object or \u003ccode\u003enull\u003c/code\u003e respectively.\u003c/p\u003e\n"],["\u003cp\u003eThe example code demonstrates adding a Transit layer to a map centered on London.\u003c/p\u003e\n"]]],[],null,["Select platform: [Android](/maps/documentation/android-sdk/utility/multilayer \"View this page for the Android platform docs.\") [JavaScript](/maps/documentation/javascript/layers \"View this page for the JavaScript platform docs.\")\n\nLayers are objects on the map that consist of one or more separate items,\nbut are manipulated as a single unit. Layers generally reflect collections of\nobjects that you add on top of the map to designate a common association. The\nMaps JavaScript API manages the presentation of objects within layers\nby rendering their constituent items into one object (typically a tile overlay) and\ndisplaying them as the map's viewport changes. Layers may also alter the presentation\nlayer of the map itself, slightly altering the base tiles in a fashion\nconsistent with the layer. Note that most layers, by design, may not be\naccessed via their individual objects, but may only be manipulated as a\nunit.\n\nLayers Overview\n\nThe Maps JavaScript API has several types of layers:\n\n- The [**Google Maps Data\n layer**](/maps/documentation/javascript/datalayer) provides a container for arbitrary geospatial data. You can use the Data layer to store your custom data, or to display GeoJSON data on a Google map.\n- The [**Heatmap layer**](/maps/documentation/javascript/heatmaplayer) renders geographic data using a *Heatmap* visualization.\n- The [**KML layer**](/maps/documentation/javascript/kmllayer) renders KML and GeoRSS elements into a Maps JavaScript API tile overlay.\n- The [**Traffic layer**](/maps/documentation/javascript/trafficlayer#traffic_layer) displays traffic conditions on the map.\n- The [**Transit layer**](/maps/documentation/javascript/trafficlayer#transit_layer) displays the public transport network of your city on the map.\n- The [**Bicycling layer**](/maps/documentation/javascript/trafficlayer#bicycling_layer) object renders a layer of bike paths and/or bicycle-specific overlays into a common layer. This layer is returned by default within the **DirectionsRenderer** when requesting directions of travel mode **BICYCLING**.\n\nAdd a layer\n\nTo add a layer to a map, you only need to call `setMap()`,\npassing it the map object on which to display the layer. Similarly, to hide a\nlayer, call `setMap()`, passing `null`.\n\nThe below snippet centers the map on London, UK, and adds the [Transit\nlayer](/maps/documentation/javascript/trafficlayer#transit_layer). \n\n```javascript\nvar mapOptions = {\n zoom: 13,\n center: new google.maps.LatLng(51.5,-0.11)\n}\n\nvar map = new google.maps.Map(document.getElementById(\"map\"), mapOptions);\n\nvar transitLayer = new google.maps.TransitLayer();\ntransitLayer.setMap(map);\n```"]]
