Layers

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 via 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 Heatmap layer renders geographic data using a Heatmap visualization.
  • 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);