What is this?

This knowledgebase contains questions and answers about PRTG Network Monitor and network monitoring in general.

Learn more

PRTG Network Monitor

Intuitive to Use. Easy to manage.
More than 500,000 users rely on Paessler PRTG every day. Find out how you can reduce cost, increase QoS and ease planning, as well.

Free Download

Top Tags


View all Tags

How can I use Google Weather Maps and Traffic Maps as map objects in PRTG Maps?

Votes:

0

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?

google-maps maps radar weather

Created on Oct 17, 2012 6:54:43 AM by  Dirk Paessler [Founder Paessler AG] (11,025) 3 6

Last change on Oct 17, 2012 7:07:49 AM by  Dirk Paessler [Founder Paessler AG] (11,025) 3 6



1 Reply

Accepted Answer

Votes:

1

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.

Created on Oct 17, 2012 6:57:19 AM by  Dirk Paessler [Founder Paessler AG] (11,025) 3 6

Last change on Apr 8, 2022 9:13:25 AM by  Frank Hadasch [Paessler Support] (0) 1




Disclaimer: The information in the Paessler Knowledge Base comes without warranty of any kind. Use at your own risk. Before applying any instructions please exercise proper system administrator housekeeping. You must make sure that a proper backup of all your data is available.