Click here to see your recently viewed pages and most viewed pages.
Hide
Google Maps JavaScript API

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 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 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 Fusion Tables layer renders data contained in Google Fusion Tables.
  • The Heatmap layer renders geographic data using a Heatmap visualization.
  • The KML layer renders KML and GeoRSS elements into a Maps API V3 tile overlay.
  • Maps Engine layers make it easy to add data from Google Maps Engine to your map. Maps Engine layer constructs tiles server-side and returns the tiles to the client. Dynamic Maps Engine layer returns vector data, allowing you to dynamically restyle layers in the client.
  • 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.
  • The Panoramio layer adds photos from Panoramio as a layer. Note: The Panoramio layer has been deprecated as of June 4, 2014. It will cease functioning on June 4, 2015.
  • The Weather and Cloud layers allow you to add weather forecasts and cloud imagery to your map. Note: The Weather and Cloud layers have been deprecated as of June 4, 2014. They will cease functioning on June 4, 2015.

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-canvas"), mapOptions);

var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);

Libraries

Some layers require that you load an additional library. Use the libraries parameter of the bootstrap request to specify the libraries that you'd like to load.

The following bootstrap request shows how to load the google.maps.panoramio library:

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?libraries=panoramio&sensor=true_or_false">
</script>
Layer Library
Panoramio libraries=panoramio
Heatmap libraries=visualization
Maps Engine libraries=visualization
Weather libraries=weather
Cloud libraries=weather