Layers

  • Layers 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.

  • The API provides various layer types, including Data, Heatmap, KML, Traffic, Transit, and Bicycling layers, each serving a distinct purpose for displaying geospatial data.

  • You can easily add or hide a layer by calling the setMap() method, providing the map object or null respectively.

  • The example code demonstrates adding a Transit layer to a map centered on London.
Select platform: Android JavaScript

Layers are objects on the map that consist of one or more separate items, but are manipulated as a single unit. Layers generally reflect collections of objects that you add on top of the map to designate a common association. The Maps JavaScript API manages the presentation of objects within layers by rendering their constituent items into one object (typically a tile overlay) and displaying them as the map's viewport changes. Layers may also alter the presentation layer of the map itself, slightly altering the base tiles in a fashion consistent with the layer. Note that most layers, by design, may not be accessed using their individual objects, but may only be manipulated as a unit.

Layers Overview

The Maps JavaScript API has several types of layers:

  • The Google Maps Data layer 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.
  • The KML layer renders KML and GeoRSS elements into a Maps JavaScript API tile overlay.
  • The Traffic layer displays traffic conditions on the map.
  • The Transit layer displays the public transport network of your city on the map.
  • The 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.

Add a layer

To add a layer to a map, you only need to call setMap(), passing it the map object on which to display the layer. Similarly, to hide a layer, call setMap(), passing null.

The below snippet centers the map on London, UK, and adds the Transit layer.

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);