Google Maps JavaScript API v3

Layers

  1. Layers Overview
  2. KML and GeoRSS Layers
  3. Heatmap Layer
  4. Fusion Table Layers (Experimental)
    1. Fusion Table Setup
    2. Constructing a FusionTables Layer
    3. Fusion Table Queries
    4. Fusion Table Styles
    5. Fusion Table Heatmaps
  5. The Traffic Layer
  6. The Transit Layer
  7. The Bicycle Layer
  8. The Weather and Cloud Layers (Library)
  9. The Panoramio Layer Library (Library)
    1. Using the PanoramioLayer Object
    2. Restricting Photos by Tag or User ID
    3. Using the Panoramio Widget API

Layers Overview

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.

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 Maps API has several types of layers:

  • KmlLayer objects render KML and GeoRSS elements into a Maps API V3 tile overlay.
  • HeatmapLayer objects renders geographic data using a Heatmap visualization.
  • FusionTablesLayer objects render data contained in Google Fusion Tables.
  • The TrafficLayer object renders a layer depicting traffic conditions and overlays representing traffic.
  • The TransitLayer object displays the public transport network of your city on the map.
  • The WeatherLayer and CloudLayer objects allow you to add weather forecasts and cloud imagery to your map.
  • The BicyclingLayer 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 PanoramioLayer object adds photos from Panoramio as a layer.

These layers are described below.

KML and GeoRSS Layers

The Google Maps API supports the KML and GeoRSS data formats for displaying geographic information. These data formats are displayed on a map using a KmlLayer object, whose constructor takes the URL of a publicly accessible KML or GeoRSS file.

Please read the KML Support page in the KML documentation for information about supported elements and size and complexity restrictions.

The Maps API converts the provided geographic XML data into a KML representation which is displayed on the map using a V3 tile overlay. This KML looks (and somewhat behaves) like familiar V3 overlay elements. KML <Placemark> and GeoRSS point elements are rendered as markers, for example, <LineString> elements are rendered as polylines and <Polygon> elements are rendered as polygons. Similarly, <GroundOverlay> elements are rendered as rectangular images on the map. Importantly, however, these objects are not Google Maps API Markers, Polylines, Polygons or GroundOverlays; instead, they are rendered into a single object on the map.

KmlLayer objects appear on a map once their map property has been set. (You can remove them from the map by calling setMap() passing null.) The KmlLayer object manages the rendering of these child elements by automatically retrieving appropriate features for the map's given bounds. As the bounds change, features in the current viewport are automatically rendered.

Because the components within a KmlLayer are rendered on demand, the layer allows you to easily manage the rendering of thousands of markers, polylines, and polygons. Note that you can't access these constituent objects directly, though they each provide click events which return data on those individual objects.

KML Layer Options

The KmlLayer() constructor optionally passes a number of KmlLayerOptions:

  • map specifies the Map on which to render the KmlLayer. You can hide a KmlLayer by setting this value to null within the setMap() method.
  • preserveViewport specifies that the map should not be adjusted to the bounds of the KmlLayer's contents when showing the layer. By default, when displaying a KmlLayer, the map is zoomed and positioned to show the entirety of the layer's contents.
  • suppressInfoWindows indicates that clickable features within the KmlLayer should not trigger the display of InfoWindow objects.

Additionally, once the KmlLayer is rendered, it contains an immutable metadata property containing the layer's name, description, snippet and author within a KmlLayerMetadata object literal. You can inspect this information using the getMetadata() method. Because rendering of KmlLayer objects requires asynchronous communication to an external server, you will want to listen for the metadata_changed event, which will indicate that the property has been populated.

The following example constructs a KmlLayer from the given GeoRSS feed:

var myLatLng = new google.maps.LatLng(49.496675, -102.65625);
var mapOptions = {
  zoom: 4,
  center: myLatLng
}

var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

var georssLayer = new google.maps.KmlLayer('http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss');
georssLayer.setMap(map);

View GeoRSS example (layer-georss.html)

The following example constructs a KmlLayer from the given KML feed:

var myLatLng = new google.maps.LatLng(41.875696, -87.624207);
var mapOptions = {
  zoom: 11,
  center: myLatLng
}

var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

var ctaLayer = new google.maps.KmlLayer('http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml');
ctaLayer.setMap(map);

View KML example (layer-kml.html)

KML Feature Details

Because KML may include a large number of features, you may not access feature data from the KmlLayer object directly. Instead, as features are displayed, they are rendered to look like clickable Maps API overlays. Clicking on individual features, by default, brings up an InfoWindow containing KML <title> and <description> information on the given feature. Additionally, a click on a KML feature generates a KmlMouseEvent, which passes the following information:

  • position indicates the latitude/longitude coordinates at which to anchor the InfoWindow for this KML feature. This position is generally the clicked location for polygons, polylines, and GroundOverlays, but the true origin for markers.
  • pixelOffset indicates the offset from the above position to anchor the InfoWindow "tail." For polygonal objects, this offset is typically 0,0 but for markers includes the height of the marker.
  • featureData contains a JSON structure of KmlFeatureData.

A sample KmlFeatureData object is shown below:

{
  author: {
    email: "nobody@google.com",
    name: "Mr Nobody",
    uri: "http://example.com"
  },
  description: "description",
  id: "id",
  infoWindowHtml: "html",
  name: "name",
  snippet: "snippet"
}

The following example displays KML feature <Description> text within a side <div> when the feature is clicked:

var myLatLng = new google.maps.LatLng(40.65, -73.95);
var mapOptions = {
  zoom: 12,
  center: myLatLng
}

var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

var nyLayer = new google.maps.KmlLayer('http://www.searcharoo.net/SearchKml/newyork.kml',
    {suppressInfoWindows: true});
nyLayer.setMap(map);
google.maps.event.addListener(nyLayer, 'click', function(kmlEvent) {
  var text = kmlEvent.featureData.description;
  showInDiv(text);
});

function showInDiv(text) {
  var sidediv = document.getElementById('contentWindow');
  sidediv.innerHTML = text;
}

View KML example (layer-kml-features.html)

Heatmap Layer

The concepts within this section refer to features only available within the google.maps.visualization library. This library is not loaded by default when you load the Maps Javascript API but must be explicitly specified through use of a libraries bootstrap parameter.
See the Libraries Overview for more information.

The Heatmap Layer provides client side rendering of heatmaps. A heatmap is a visualization used to depict the intensity of data at geographical points. When the Heatmap Layer is enabled, a colored overlay will appear on top of the map. By default, areas of higher intensity will be colored red, and areas of lower intensity will appear green.

The Google Maps JavaScript API can either render heatmap data client-side via the Heatmap Layer, or server-side via a Fusion Table. Some of the key differences between the two methods include:

Heatmap Layer Fusion Table Layer
A large number of data points may result in reduced performance. More data points will have little impact on performance.
Able to customize the appearance of the heatmap by changing such options as: the color gradient, the radius of data points, and the intensity of each data point. No ability to customize the appearance of the heatmap.
Able to control whether heatmap data dissipates at higher zoom levels or not. All heatmap data will dissipate as you zoom in.
Data can be stored with your HTML, stored on a server, or calculated on the fly. Data can be changed at runtime. All data must be stored in a Fusion Table. Data cannot be easily changed at runtime.

To add a Heatmap Layer, you must first create a new HeatmapLayer object, and provide it with some geographic data in the form of an array or an MVCArray[] object. The data may be either a LatLng object or a WeightedLocation object. After instantiating the HeatmapLayer object, add it to the map by calling the setMap() method.

The following example adds 14 data points to a map of San Francisco.

/* Data points defined as an array of LatLng objects */
var heatmapData = [
  new google.maps.LatLng(37.782, -122.447),
  new google.maps.LatLng(37.782, -122.445),
  new google.maps.LatLng(37.782, -122.443),
  new google.maps.LatLng(37.782, -122.441),
  new google.maps.LatLng(37.782, -122.439),
  new google.maps.LatLng(37.782, -122.437),
  new google.maps.LatLng(37.782, -122.435),
  new google.maps.LatLng(37.785, -122.447),
  new google.maps.LatLng(37.785, -122.445),
  new google.maps.LatLng(37.785, -122.443),
  new google.maps.LatLng(37.785, -122.441),
  new google.maps.LatLng(37.785, -122.439),
  new google.maps.LatLng(37.785, -122.437),
  new google.maps.LatLng(37.785, -122.435)
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map-canvas'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: google.maps.MapTypeId.SATELLITE
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapData
});
heatmap.setMap(map);

Adding Weighted Data Points

A heatmap can render either both LatLng() and WeightedLocation objects, or a combination of the two. Both objects represent a single data point on a map, but a WeightedLocation object allows you to additionally specify a weight for that data point. Applying a weight to a data point will cause the WeightedLocation to be rendered with a greater intensity than a simple LatLng object. The weight is a linear scale, in which each LatLng object has an implicit weight of 1 — adding a single WeightedLocation of {location: new google.maps.LatLng(37.782, -122.441), weight: 3} will have the same effect as adding google.maps.LatLng(37.782, -122.441) three times. You can mix weightedLocation and LatLng objects in a single array.

Using a WeightedLocation object in place of a LatLng can be useful when:

  • Adding large amounts of data at a single location. Rendering a single WeightedLocation object with a weight of 1000 will be faster than rendering 1000 LatLng objects.
  • Applying an emphasis to your data based upon arbitrary values. For example, you can use LatLng objects when plotting earthquake data, but you may want to use a WeightedLocation to measure the magnitude of each earthquake on the richter scale.

/* Data points defined as a mixture of WeightedLocation and LatLng objects */
var heatMapData = [
  {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
  new google.maps.LatLng(37.782, -122.445),
  {location: new google.maps.LatLng(37.782, -122.443), weight: 2},
  {location: new google.maps.LatLng(37.782, -122.441), weight: 3},
  {location: new google.maps.LatLng(37.782, -122.439), weight: 2},
  new google.maps.LatLng(37.782, -122.437),
  {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},

  {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
  {location: new google.maps.LatLng(37.785, -122.445), weight: 2},
  new google.maps.LatLng(37.785, -122.443),
  {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
  new google.maps.LatLng(37.785, -122.439),
  {location: new google.maps.LatLng(37.785, -122.437), weight: 2},
  {location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map-canvas'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: google.maps.MapTypeId.SATELLITE
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatMapData
});
heatmap.setMap(map);

Customizing a Heatmap Layer

You can customize how your heatmap will be rendered with the following heatmap options. See the HeatmapLayerOptions documentation for more information.

  • dissipating: Specifies whether heatmaps dissipate on zoom. When dissipating is false the radius of influence increases with zoom level to ensure that the color intensity is preserved at any given geographic location. Defaults to false.
  • gradient: The color gradient of the heatmap, specified as an array of CSS color strings. All CSS3 colors — including RGBA — are supported except for extended named colors and HSL(A) values.
  • maxIntensity: The maximum intensity of the heatmap. By default, heatmap colors are dynamically scaled according to the greatest concentration of points at any particular pixel on the map. This property allows you to specify a fixed maximum. Setting the maximum intensity can be helpful when your dataset contains a few outliers with an unusually high intensity.
  • radius: The radius of influence for each data point, in pixels.
  • opacity: The opacity of the heatmap, expressed as a number between 0 and 1.

View Heatmap Layer example (layer-heatmap.html)

Fusion Table Layers ( Experimental)

The Google Maps API allows you to render data contained in Google Fusion Tables as a layer on a map using the FusionTablesLayer object. A Google Fusion Table is a database table where each row contains data about a particular feature; for geographic data, each row within a Google Fusion Table additionally contains location data, holding a feature's positional information. The FusionTablesLayer provides an interface to Fusion Tables and supports automatic rendering of this location data, providing clickable overlays that display a feature's additional data.

A sample Fusion Table, showing geographic data, is shown below:

Limits

You can use the Maps API to add up to five Fusion Tables layers to a map, one of which can be styled with up to five styling rules.

In addition:

  • Only the first 100,000 rows of data in a table are mapped or included in query results.
  • Queries with spatial predicates only return data from within this first 100,000 rows. Therefore, if you apply a filter to a very large table and the filter matches data in rows after the first 100K, these rows are not displayed.
  • When importing or inserting data, remember:
    • The total size of the data sent in one API call cannot exceed 1MB.
    • A cell of data in Fusion Tables supports a maximum of 1 million characters; it may sometimes be necessary to reduce the precision of coordinates or simplify polygon or line descriptions.
    • The maximum number of vertices supported per table is 5 million.
  • When looking at the map, you may notice:
    • The ten largest-area components of a multi-geometry are shown.
    • When zoomed farther out, tables with more than 500 features will show dots (not lines or polygons).

Fusion Table Setup

Fusion Tables are tables of data that provide built-in geographic data support. Full documentation for Fusion Tables is located in the Fusion Tables Developer's Guide. For a Fusion Tables layer to display data within the API on a Google map, the table must satisfy the following criteria:

  • The table must be shared as Public or as Unlisted.
  • The table must have one or more columns exposed as a Location. In the Fusion Tables web interface, select Edit > Modify Columns and select the desired column(s).

The Location column must follow the formatting requirements below.

  • Latitude/longitude coordinates can be entered in a single column, comma separated (latitude,longitude), or can be split across two columns (one column for latitude, and one for longitude). Refer to the Fusion Tables documentation for more information.
  • Addresses must first be geocoded. In the Fusion Tables web interface, select File > Geocode.
  • KML geometric data such as points, lines, and polygons are supported.

Constructing a FusionTables Layer

The FusionTablesLayer constructor creates a layer from a public Fusion table using the table's Encrypted ID, which can be found by selecting File > About in the Fusion Tables UI.

To add a Fusion Tables layer to your map, create the layer, passing a query object with the following:

  • A select property whose value is the column name containing the location information. You must use quotes around any column names that contain spaces, reserved words, or that do not begin with a letter.
  • A from property whose value is either of the Encrypted ID.

Then, set the layer's map to your Map object, as with any other overlay.

Older versions of the Google Maps JavaScript API referenced a Fusion Table by its Numeric ID. While this method continues to work, the Encrypted ID is preferred.

The following example shows homicides within Chicago in 2009 using a public Fusion Table:

var chicago = new google.maps.LatLng(41.850033, -87.6500523);

map = new google.maps.Map(document.getElementById('map-canvas'), {
  center: chicago,
  zoom: 12,
  mapTypeId: 'roadmap'
});

var layer = new google.maps.FusionTablesLayer({
  query: {
    select: 'Geocodable address',
    from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
  },
});
layer.setMap(map);

View Fusion table example (layer-fusiontables-simple.html)

Fusion Table Queries

Fusion Tables also allow you to apply powerful queries which can constrain a result set to a specified criteria. Queries are specified using a FusionTablesLayerOptions query parameter:

query: {
  select: locationColumn,
  from: fusionTableID,
  where: constraintClause
}

where the locationColumn is an existing geocoded column of type Location. You must use quotes around any column names in the select or where fields that contain spaces, reserved words, or that do not begin with a letter.

Supported search operators are listed in the Fusion Tables documentation.

The following example displays locations along the CTA's Red Line that had weekday ridership above 5000:

var chicago = new google.maps.LatLng(41.948766, -87.691497);

map = new google.maps.Map(document.getElementById('map-canvas'), {
  center: chicago,
  zoom: 12,
  mapTypeId: 'roadmap'
});

var layer = new google.maps.FusionTablesLayer({
  query: {
    select: 'address',
    from: '1d7qpn60tAvG4LEg4jvClZbc1ggp8fIGGvpMGzA',
    where: 'ridership > 5000'
  }
});
layer.setMap(map);

View Fusion table example (layer-fusiontables-query.html)

Fusion Table Styles

The Fusion Tables layer constructor also accepts a FusionTablesLayerOptions styles parameter, to apply color, stroke weight, and opacity to lines and polygons. Marker icons can also be specified from the supported Map marker or Icon names.

Styles can only be applied to a single Fusion Tables layer per map. You may apply up to five styles to that layer.

The styles parameter uses the following syntax:

styles: [{
  where: 'column_name condition',
  markerOptions: {
    iconName: "supported_icon_name"
  },
  polygonOptions: {
    fillColor: "#rrggbb",
    strokeColor: "#rrggbb",
    strokeWeight: "int"
  },
  polylineOptions: {
    strokeColor: "#rrggbb",
    strokeWeight: "int"  }
}, {
  where: ...
  ...
}]

Styles are applied on top of any styling which has been specified in the Fusion Tables web interface. Styles provided to the layer constructor are then applied in the order in which they're listed, with any features matching multiple rules taking the last matching style.

To create a default style to apply to all features, create a style with no where clause:

styles: [{
  markerOptions: {
    iconName: "large_green"
  }
}]

The following example shows:

  • A default style that colors all polygons green, with a 0.3 opacity level.
  • All polygons whose 'birds' column exceeds 300 are colored blue. They retain the opacity level set by the default style.
  • All polygons whose 'population' column exceeds 5 have their opacity level set at 1.0. They retain their fillColor values.
var australia = new google.maps.LatLng(-25, 133);

map = new google.maps.Map(document.getElementById('map-canvas'), {
  center: australia,
  zoom: 4
});

layer = new google.maps.FusionTablesLayer({
  query: {
    select: 'geometry',
    from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ'
  },
  styles: [{
    polygonOptions: {
      fillColor: "#00FF00",
      fillOpacity: 0.3
    }
  }, {
    where: "birds > 300",
    polygonOptions: {
      fillColor: "#0000FF"
    }
  }, {
    where: "population > 5",
    polygonOptions: {
      fillOpacity: 1.0
    }
  }]
});
layer.setMap(map);

View Fusion table example (layer-fusiontables-styling.html)

Fusion Table Heatmaps

Fusion Tables also provide limited support for heatmaps, where the density of matched locations is depicted using a palette of colors. Current heatmaps use a red (dense) to green (sparse) gradient to indicate the relative prevalence of associated locations. You enable a heatmap by setting the layer's FusionTablesLayerOptions heatmap parameter to enabled: true.

The following example shows designated beaches on the coast of Brazil using a heatmap:

var brazil = new google.maps.LatLng(-18.771115, -42.758789);

map = new google.maps.Map(document.getElementById('map-canvas'), {
  center: brazil,
  zoom: 5
});

layer = new google.maps.FusionTablesLayer({
  query: {
    select: 'LATITUDE',
    from: '0ILwUgu7vj0VSZnVzaW9udGFibGVzOjEzNjcwNQ'
  },
  heatmap: {
    enabled: true
  }
});
layer.setMap(map);

View Fusion table example (layer-fusiontables-heatmap.html)

The Traffic Layer

The Google Maps API allows you to add real-time traffic information (where supported) to your maps using the TrafficLayer object. Traffic information is provided for the time at which the request is made. Consult this spreadsheet to determine traffic coverage support.

var myLatLng = new google.maps.LatLng(34.04924594193164, -118.24104309082031);
var mapOptions = {
  zoom: 13,
  center: myLatLng
}

var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);

View Traffic example (layer-traffic.html)

The Transit Layer

The Google Maps API allows you to display the public transit network of a city on your map using the TransitLayer object. When the Transit Layer is enabled, and the map is centered on a city that supports transit information, the map will display major transit lines as thick, colored lines. The color of the line is set based upon information from the transit line operator. Enabling the Transit Layer will alter the style of the base map to better emphasize transit routes.

Transit information is only available in select locations. To see a list of cities where public transit information is currently available, please consult this list.

If you're a public agency that oversees public transportation for your city and would like your data to be included, please visit the Google Transit Partner Program site to learn more.

The following example shows the Transit layer enabled on a map of London, UK:

var myLatlng = new google.maps.LatLng(51.501904,-0.115871);
var mapOptions = {
  zoom: 13,
  center: myLatlng
}

var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

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

View Transit example (layer-transit.html)

The Bicycling Layer

The Google Maps API allows you to add bicycle information to your maps using the BicyclingLayer object. The BicyclingLayer renders a layer of bike paths, suggested bike routes and other overlays specific to bicycling usage on top of the given map. Additionally, the layer alters the style of the base map itself to emphasize streets supporting bicycle routes and de-emphasize streets inappropriate for bicycles.

The following examples shows the Bicycle layer enabled on a map of Cambridge, MA:

var myLatLng = new google.maps.LatLng(42.3726399, -71.1096528);
var mapOptions = {
  zoom: 14,
  center: myLatLng
}

var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);

Dark green routes indicated dedicated bicycle routes. Light green routes indicate streets with dedicated "bike lanes." Dashed routes indicate streets or paths otherwise recommended for bicycle usage.

View example (layer-bicycling.html)

The Weather and Cloud Layers (Library)

The concepts within this section refer to features only available within the google.maps.weather library. This library is not loaded by default when you load the Maps Javascript API but must be explicitly specified through use of a libraries bootstrap parameter.
See the Libraries Overview for more information.

You can enable the display of weather data or cloud imagery on your map via the WeatherLayer and CloudLayer classes of the google.maps.weather library. Enabling the cloud layer will add cloud coverage imagery to your map, visible at zoom levels 0 through 6. Enabling the weather layer will show current weather conditions from weather.com on your map, including icons that denote sun, clouds, rain and so on. Clicking on the weather icon for a particular area will open an info window with detailed data such as current humidity and wind conditions, as well as a four-day forecast. You can access this detailed data through the featureDetails property of the WeatherMouseEvent object. The below example detects when you click on an icon, and displays the current temperature at that location.

google.maps.event.addListener(weatherLayer, 'click', function(e) {
  alert('The current temperature at ' + e.featureDetails.location + ' is '
        + e.featureDetails.current.temperature + ' degrees.');
});

With the WeatherLayerOptions object you can disable info windows, configure the color of the labels displayed on the weather layer, and customize the units used to display temperature (degrees Celsius or Fahrenheit) and wind speed (km/h, mph, or m/s).

When the weather layer is enabled and the zoom level is set to 12 or lower, administrative labels, such as the names of streets or regions, will be disabled on your map. At zoom level 13 the weather layer is automatically disabled and administrative labels are restored.

The below example enables the cloud and weather layer, and sets the default units to Fahrenheit.

var mapOptions = {
  zoom: 6,
  center: new google.maps.LatLng(49.265984, -123.127491)
};

var map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);

var weatherLayer = new google.maps.weather.WeatherLayer({
  temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
});
weatherLayer.setMap(map);

var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);

View Weather example (layer-weather.html)

The Panoramio Layer (Library)

The concepts within this section refer to features only available within the google.maps.panoramio library. This library is not loaded by default when you load the Maps Javascript API but must be explicitly specified through use of a libraries bootstrap parameter.

See the Libraries Overview for more information.

Using the PanoramioLayer Object

You may add photos from Panoramio as a layer to your maps using the PanoramioLayer object. The PanoramioLayer renders a layer of geotagged photo icons from Panoramio on the map as a series of large and small photo icons.

To add a PanoramioLayer to your map, simply create the object and set its map property:

var panoramioLayer = new google.maps.panoramio.PanoramioLayer();
panoramioLayer.setMap(map);

By default, clicking on a photo icon within a Panoramio layer brings up an info window with a larger photo and more information. You may remove this default behavior by setting the layer's suppressInfoWindows property to true. You may inspect the metadata associated with an individual Panoramio photo by handling the 'click' event on the PanoramioLayer and inspecting the PanoramioMouseEvent for its featureDetails property. Note that if you implement your own click handler and do not display the default info window, your use of Panoramio photos must comply with the Panoramio API Terms of Service, including any branding and attribution requirements.

The following example shows a Panoramio layer for Seattle, WA. Clicking on a photo appends a list of links to Panoramio photo pages in a right-hand panel:

var fremont = new google.maps.LatLng(47.651743, -122.349243);
var mapOptions = {
  zoom: 16,
  center: fremont
};

var map = new google.maps.Map(
    document.getElementById("map-canvas"),
    mapOptions);

var panoramioLayer = new google.maps.panoramio.PanoramioLayer();

panoramioLayer.setMap(map);

google.maps.event.addListener(panoramioLayer, 'click', function(event) {
  var photoDiv = document.getElementById('photoPanel');
  var attribution = document.createTextNode(event.featureDetails.title + ": " + event.featureDetails.author);
  var br = document.createElement("br");
  var link = document.createElement("a");
  link.setAttribute("href", event.featureDetails.url);
  link.appendChild(attribution);
  photoDiv.appendChild(br);
  photoDiv.appendChild(link);
});

View example (layer-panoramio.html)

Restricting Photos by Tag or User ID

You may restrict the set of photos to display on a PanoramioLayer to those matching a certain textual tag, or those matching a particular user.

To restrict photos to those of a particular tag, call setTag() on the PanoramioLayer object. The layer will update to only show photos matching that tag within the map's viewport. To restrict photos to those of a particular user, call setUserId() on the PanoramioLayer object.

The following example displays a map of New York harbor with no tag filtering. Entering text in the input field applies a filter using the setTag() method:

var panoramioLayer;
function initialize() {
  var nyHarbor = new google.maps.LatLng(40.693134, -74.031028);
  var mapOptions = {
    zoom: 15,
    center: nyHarbor
  };

  var map = new google.maps.Map(
      document.getElementById("map-canvas"),
      mapOptions);

  panoramioLayer = new google.maps.panoramio.PanoramioLayer();

  panoramioLayer.setMap(map);
}

function getTaggedPhotos() {
  var tagFilter = document.getElementById('tag').value;
  panoramioLayer.setTag(tagFilter);
}

View example (layer-panoramio-tags.html)

Using the Panoramio Widget API

You may also use the Panoramio Widget API to display images within a PanoramioWidget object. To use the Panoramio API, you will need to load the Javascript symbols for that API separately from the Javascript API via a script tag:

<script type="text/javascript" src="http://www.panoramio.com/wapi/wapi.js?v=1">
</script>

The Panoramio PhotoWidget has a default size of 400 x 300 pixels. If you wish to display a PhotoWidget within an info window, you may either use this default size, or set one explicitly within the PhotoWidget's constructor. Note that the PhotoWidget will not size itself automatically based on its container (the info window in this case). Instead, you will need to explicitly set the widget's width and height.

The following example uses the Panoramio Widget API to populate an info window with a Panoramio image. Note that the widget could be easily configured to display more than one image.

// This example requires loading the Panoramio Widget API
// via http://www.panoramio.com/wapi/wapi.js?v=1

// The photoDiv defines the DIV within the info window for
// displaying the Panoramio photo within its PhotoWidget.
// We use the info window's maximum size of 640 px.
var photoDiv =  document.createElement("div");
photoDiv.style.width = '640px';
photoDiv.style.height = '500px';

// The PhotoWidget width and height are expressed as number values,
// not string values so we need to turn them into floats.
var photoWidgetOptions = {
  'width': parseFloat(photoDiv.style.width),
  'height': parseFloat(photoDiv.style.height)
};

// We construct a PhotoWidget here with a blank (null) request as we
// don't yet have a photo to populate it.
var photoWidget = new panoramio.PhotoWidget(photoDiv, null, photoWidgetOptions);

var monoLake = new google.maps.LatLng(37.973432, -119.093170);
var mapOptions = {
  zoom: 11,
  center: monoLake
};

var map = new google.maps.Map(
    document.getElementById("map-canvas"),
    mapOptions);

var photoWindow = new google.maps.InfoWindow();
var panoramioOptions = {
  suppressInfoWindows: true
}
var panoramioLayer = new google.maps.panoramio.PanoramioLayer(panoramioOptions);

panoramioLayer.setMap(map);

google.maps.event.addListener(panoramioLayer, 'click', function(event) {

  var photoRequestOptions = {
    ids: [{'photoId': event.featureDetails.photoId,
           'userId': event.featureDetails.userId}]
  }
  photoWidget.setRequest(photoRequestOptions);
  photoWidget.setPosition(0);

  photoWindow.setPosition(event.latLng);
  photoWindow.open(map);
  photoWindow.setContent(photoDiv);
});

View example (layer-panoramio-widget.html)

Consult the Panoramio Javascript API documentation for full information on using this API.

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.