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.
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.
Here are the steps to show the respective temperatures and cloud conditions in your maps:
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>
Change the center and zoom of the map in the
mapOptions
object so that we can make use of the related layers...