The Weather and Cloud Layers allow you to add weather forecasts and cloud imagery to your map.
Overview
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.
Load the weather library
The Weather and Cloud Layers are part of the google.maps.weather library, and are not
loaded by default. The relevant classes are in a self-contained library,
separate from the main Maps API JavaScript code. To use the functionality
contained within this library, you must first load it using the libraries
parameter in the Maps API bootstrap URL:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=weather&sensor;=true_or_false"> </script>
See the Libraries Overview for more information.
Cloud Layer
Enabling the cloud layer will add cloud coverage imagery to your map, visible at zoom levels 0 through 6.
To enable the Cloud layer, create a new google.maps.weather.CloudLayer and call its setMap() method.
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
Weather Layer
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.
To enable the Weather layer, create a new google.maps.weather.WeatherLayer and call its setMap() method.
var weatherLayer = new google.maps.weather.WeatherLayer();
weatherLayer.setMap(map);
Customize the Weather layer
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.
function initialize() {
var mapOptions = {
zoom: 4,
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);
}
google.maps.event.addDomListener(window, 'load', initialize);
Access detailed weather data
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 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.');
});