Adding the weather and cloud layers

Information on the temperature and weather conditions coupled with a map display is very common in weather reports on TVs; Google has put a feature in its API so that we can have this information in our own maps.

In this recipe, we will learn how to display weather-related information on top of base maps as overlays.

Getting ready

We can continue on from the Creating a simple map in a custom DIV element recipe from Chapter 1, Google Maps JavaScript API Basics, as we do not need to go into detail for the basic map display.

How to do it…

Here are the steps to show the respective temperatures and cloud conditions in your maps:

1. Add the weather library to the end of the reference for the Google Maps JavaScript API:

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

2. Change the center and zoom of the map in the mapOptions object so that we can make use of the related layers...