- Layers Overview
- KML and GeoRSS Layers
- Heatmap Layer
- Fusion Table Layers (Experimental)
- The Traffic Layer
- The Transit Layer
- The Bicycle Layer
- The Weather and Cloud Layers (Library)
- The Panoramio Layer Library (Library)
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
andCloudLayer
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 theDirectionsRenderer
when requesting directions of travel modeBICYCLING
. - The
PanoramioLayer
object adds photos from Panoramio as a layer. - The
DemographicsLayer
object renders United States demographic information as a layer, and is available to Google Maps API for Business customers only. It is contained within thevisualization
library.
These layers are described below. The Demographics layer is documented in the Demographics Layer chapter of the Google Maps API for Business documentation.
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 Marker
s,
Polyline
s, Polygon
s or GroundOverlay
s;
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 theMap
on which to render theKmlLayer
. You can hide aKmlLayer
by setting this value tonull
within thesetMap()
method.preserveViewport
specifies that the map should not be adjusted to the bounds of theKmlLayer
's contents when showing the layer. By default, when displaying aKmlLayer
, the map is zoomed and positioned to show the entirety of the layer's contents.suppressInfoWindows
indicates that clickable features within theKmlLayer
should not trigger the display ofInfoWindow
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, mapTypeId: google.maps.MapTypeId.ROADMAP } 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, mapTypeId: google.maps.MapTypeId.ROADMAP } 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 theInfoWindow
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 aboveposition
to anchor theInfoWindow
"tail." For polygonal objects, this offset is typically0,0
but for markers includes the height of the marker.featureData
contains a JSON structure ofKmlFeatureData
.
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, mapTypeId: google.maps.MapTypeId.ROADMAP } 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 1000LatLng
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 aWeightedLocation
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.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). For more information, refer to How do I specify which column has location information? in the Google Fusion Tables help center.
- 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, mapTypeId: google.maps.MapTypeId.ROADMAP }); 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, mapTypeId: google.maps.MapTypeId.ROADMAP }); 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, mapTypeId: google.maps.MapTypeId.ROADMAP } 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, mapTypeId: google.maps.MapTypeId.ROADMAP } 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, mapTypeId: google.maps.MapTypeId.ROADMAP } 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), mapTypeId: google.maps.MapTypeId.ROADMAP }; 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, mapTypeId: google.maps.MapTypeId.ROADMAP }; 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, mapTypeId: google.maps.MapTypeId.ROADMAP }; 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, mapTypeId: google.maps.MapTypeId.ROADMAP }; 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.