Google has recently enabled two new weather layers for Google Maps (weather and cloud coverage), see: Weather Layer now available in the Google Maps API

Also the the traffic map layer has been around for some time.

How can I use these in my PRTG maps?

Article Comments

Important notice: Google has closed their weather and cloud solutions, so the information in this article will not work. As alternative you can use, for example, OpenWeatherMap. See also this article: How can I show up-to-date weather information, webcam and radar images in PRTG's maps?

This is not an official feature of PRTG and as such it is not officially supported. It may or may not work for you.

Displaying Traffic and Weather Information

The following solution works on our dashboards. It displays a map of the Nuremberg metropolitan area with traffic information and weather information (note: this map does not display sensor information).

Here is a screenshot, the Google Map is on the right below the Paessler logo:

Paessler Dashboards Screenshot

Please see the related Blog article for more information.


How We Did It

You need to create two files in your PRTG installation:

1. x_trafficmap.htm (in \webroot\mapobjects folder)

<!--Custom Objects: Weather and Traffic--> <div class="map_object " id="<@itemid>" objectid="<@objectid>" subid="<@subid>" style="min-width:100px;min-height:40px;<#mapobject type="coordinates" subid="<@subid>" mode="<@editmode>">"> <#mapobject type="htmlbefore" subid="<@subid>"> <iframe frameborder="0" height="<@height>" src="/public/weathergooglemap.htm" width="<@width>"></iframe> <#mapobject type="htmlafter" subid="<@subid>"> </div>

2. As you can see the map object above makes use of an <iframe> which references a file /public/weathergooglemap.htm, which you must create in the /webroot/public folder of your PRTG installation.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="https://maps.google.com/maps/api/js?key=YOUR_API_KEY&sensor=false&libraries=weather">
</script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(49.45,11.05);
    var myOptions = {
      zoom: 11,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
        
    var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);
  
var weatherLayer = new google.maps.weather.WeatherLayer({
  temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS
});
weatherLayer.setMap(map);

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

</script>
</head>
<body onload="setTimeout(2000,initialize());">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

You will need a Google Maps API key and paste it here:

key=YOUR_API_KEY

You will need to customize the location code var latlng = new google.maps.LatLng(49.45,11.05); and the zoom factor zoom: 11, so your location is visible.

You can now add the map as new map object into you PRTG maps as soon as these two files are created. Look for the "Custom Objects" group and select the "Weather and Traffic" object.


Oct, 2012 - Permalink