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 Paessler Dashboards Screenshot](https://cdn.paessler.com/media/scales/narrow/common/files/blog/2012/dashboard-sample.png)
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.
Add comment