Google traffic widget refresh rate

  • 1
  • Question
  • Updated 3 years ago
  • Answered
Does anybody know if the Google traffic widget gets refreshed on a regular basis at at which frequency?
 We use a presentation page that is unique for the whole day and in which this widget is displayed. I've the feeling it does not refresh very often.
As a workaround, I'm going to test adding a 1 second Text widget in the placeholder. I'm curious to see if the traffic widget cycling with will get refreshed.
Thanks you.
Photo of Thierry Masson

Thierry Masson, Champion

  • 2,356 Points 2k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
As a workaround simply use Custom URL widget where copy the link from Google Maps with traffic overlay. You can set you refresh rate too.
Photo of Thierry Masson

Thierry Masson, Champion

  • 2,356 Points 2k badge 2x thumb
Thanks. So simple ...
I guess that for the refresh rate, you speak about the one integrated in the Rise Web page URL (no a hidden mysterious URL parameter on the Google URL I mean).
Correct ? 
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Yup, that's the one. I recommend setting it to 30 min because at refresh the pages does blink. At 5 min it may bother a bit, and at 30 min it would not be too noticeable and traffic data still is pretty accurate. Do not forget to disable interactivity and scroll bars.
Photo of Thierry Masson

Thierry Masson, Champion

  • 2,356 Points 2k badge 2x thumb
Many thanks.
Thierry
Photo of Thierry Masson

Thierry Masson, Champion

  • 2,356 Points 2k badge 2x thumb
Mhumm. Finally, does not work. At least using the Rise preview.
Using the Chrome console, I get :

Refused to display 'https://www.google.com/maps/@50.8307703,4.3777715,11z/data=!5m1!1e1?hl=en&dummyVar=75' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

Apparently, Google traffic does not like to be put in a frame from a page that is not under Google.com ...
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
It works in mine: http://preview.risevision.com/?type=presentation&id=ee2adcbd-51d3-4467-a18d-5ee6f665e590&sho...

And all I do is set the map in Google Maps and copy+paste the url code to Web Page widget.
Photo of TE Signs

TE Signs

  • 462 Points 250 badge 2x thumb
Web page widget or Custom URL widget? It isn't working for me either. 
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
I see... Google changed the address line... I broke my own ))) Working on it
Photo of Thierry Masson

Thierry Masson, Champion

  • 2,356 Points 2k badge 2x thumb
Otherwise, in the past, I used this code and it is still working.
A bit harder to configure. Settings to change are in bold and underline.
I'm not a good JS programmer so I don't know what the behavior of the windows.setintervall is. I'm wondering if it does not refresh the whole page and no only the placeholder.
To be checked.


<!DOCTYPE html> 
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 600px;
width: 600px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.13&sensor=false"></script>;
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 11,
disableDefaultUI: true,
center: new google.maps.LatLng(50.8201049,4.3877607),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
window.setInterval(function(){initialize();}, 20000);
</script>
</head>
<body>
<div id="map-canvas" ></div>
</body>
</html>
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
I made that presentation some time last year, while, apparently, links were working. Sorry for the confusion, I just learned myself that things have changed since then. On top of that I deleted the link I had... I may still have it though in one of my HTML files.

I guess this is the only way to make it work now. They still give 'embedded' map option, but without traffic overlay... no use.
Photo of CAISupport

CAISupport

  • 1,542 Points 1k badge 2x thumb
Hi all,

The Traffic Widget refreshes every 5 min. The problem is that the  browser caches the traffic map tiles, so even though the widget is requesting an update, it's still showing old data. Here's an explanation of the issue and an alleged workaround: http://stackoverflow.com/questions/25687831/refreshing-google-maps-api-v3-layers

May want to give that a go if you're still seeing issues. If we find this addresses the caching issue in the widget, we'll be pushing out an updated version.

We'll keep everyone posted!
Photo of Thierry Masson

Thierry Masson, Champion

  • 2,356 Points 2k badge 2x thumb
Great support ......
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Thanks CAISupport!
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
So, I found this old code I had for similar application. It looks pretty much the same compared to what Thierry has posted:

<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDbUWJWuGEpAhXFK_W-9DE60Op6mDPkSN4&sensor=true&...;
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(41.053466,-73.537788),
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);

var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);
  
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"/>
  </body>
</html>

I highlighted the areas you want to edit in order to make it work for you. It simply can be pasted into HTML Widget. You may also want to add this: " http-equiv="refresh" content="30" " (30 seconds refresh interval; change it to whatever you think works for you) in your <meta> brackets.

Also, you can create entirely new HTML file with this code, place it in your online storage, and pull it from there with Web Page Widget. This way you do not need to add anything in <meta> brackets. Simply use widget's refresh controls.

Result: http://preview.risevision.com/?type=presentation&id=ee2adcbd-51d3-4467-a18d-5ee6f665e590&sho...


It works now just as it was working 3 years ago. Hopefully Google will not block this in the future.

For refresh: http://www.w3schools.com/tags/att_meta_http_equiv.asp

For finding your coordinates: https://support.google.com/maps/answer/18539?hl=en

And I think I need to do more of my own stuff ))))
(Edited)
Photo of Thierry Masson

Thierry Masson, Champion

  • 2,356 Points 2k badge 2x thumb
Thanks a lot. I like such collaboration using the discussion board ;-)

Please note that if you refresh your page too often, you may be temporarily blacklisted by Google. This is the side effect of the cloud technology. If you load the system too much, there are three solutions :
1- you pay the provider for the load you need
2- you optimize your code to reduce the load by lowering down the update frequency ;-)
Photo of Thierry Masson

Thierry Masson, Champion

  • 2,356 Points 2k badge 2x thumb
Dear Darius,

I can not get yours working. I get this error.
I get this error : Failed to load resource: 
net::ERR_BLOCKED_BY_CLIENTmaps.googleapis.com/maps-api-v3/api/js/22/15/intl/fr_ALL/util.js:30 RetiredVersion, SensorNotRequired: https://developers.google.com/maps/documentation/javascript/error-messages
maps.googleapis.com/maps-api-v3/api/js/24/0/intl/fr_ALL/util.js:22 Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required
Finally my version for me. But please note if you add this in the header :
<meta http-equiv="refresh" content="30"> 
You get an error during refresh. So, best is to use an JS event handler with the setinterval. I put my version here after.

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://preview.risevision.com') does not match the recipient window's origin ('http://s3.amazonaws.com').
Photo of Thierry Masson

Thierry Masson, Champion

  • 2,356 Points 2k badge 2x thumb
Here it the version that works perfectly for me with an automatic refresh.
Use a HTML widget and copy/paste. 
Adapt the section : // Update here after upon your needs
To know the latitude and longitude, simply go to GoogleMaps, activate the traffic options and pickup the lat,long from the URL.

Tip: Don't refresh too often or you might be blacklisted by Google.


<!DOCTYPE html> <html> 
<head> 
<title>Google Map traffic</title> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<style> 
html, body, #map-canvas { 
margin: 0; 
padding: 0; 
/* height: 600px; 
width: 600px; 
*/ overflow:hidden; // avoid the scroll bars
height: 100%; 
width: 100%; 

</style> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.13&sensor=false"></script>;
<script> 
//
// Update here after upon your needs
var latitude="50.8201049";
var longitude="4.3877607";
var zoomlevel=11;
var refreshseconds=10*60;   // every 10 minutes
// stop update

var map; 
refreshseconds=refreshseconds*1000;

function initialize() { 
var mapOptions = { 
zoom: zoomlevel, 
disableDefaultUI: true, 
center: new google.maps.LatLng(latitude,longitude), 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var trafficLayer = new google.maps.TrafficLayer(); 
trafficLayer.setMap(map); 

google.maps.event.addDomListener(window, 'load', initialize); 
window.setInterval(function(){initialize();},refreshseconds); 
</script> 
</head> 
<body> 
<div id="map-canvas" ></div> 
</body> 
</html>
(Edited)
Photo of CAISupport

CAISupport

  • 1,542 Points 1k badge 2x thumb
Hi all,

Just wanted to let everyone know that we pushed out an update to the traffic widget this morning that implements the workaround in the Stackoverflow article I referenced above.

It seems like it does the trick. The map should be updating every 2 minutes now.
Photo of Thierry Masson

Thierry Masson, Champion

  • 2,356 Points 2k badge 2x thumb
Excellent. I'm going to test and will come back to you.