Search code examples
google-maps-api-3yahoo-weather-api

google map api v3 Weather information


How do we add the weather overlay option to a Google map, just like on Google my maps? I've searched for it, but i can't find the answer.

Do i have to call a weather web service?


Solution

  • You can display the WeatherLayerdev-guide on your map by taking two steps:

    First, load the WeatherLayer library by adding the libraries parameter to the URL you use to load the map:

    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?libraries=weather&sensor=false">
    </script>
    

    Then, you must create an instance of the google.maps.weather.WeatherLayerapi-doc class, passing any options in a WeatherLayerOptionsapi-doc object, and attach the WeatherLayer to the map:

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

    In addition to the WeatherLayer, there is also a separate google.maps.weather.CloudLayerapi-doc class that you may create in a similar way:

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

    There is no separate library that you must load to use the CloudLayer; adding the libraries=weather parameter to the URL that loads the map makes both the WeatherLayer and the CloudLayer available on your map. There as a Google Maps JavaScript API v3 Example: Weather Layer, that shows the usage of both layers.