javascript - Google Maps refresh traffic layer - Stack Overflow

admin管理员组

文章数量:1330097

In my Rails app, the background consists of a fullscreen div with Google Maps and a traffic layer. This is what gets called on page load:

$(function () {  
  updateMap();
});

The updateMap function creates a Google Map on the div element 'google_map':

function updateMap()  {
      var latlng = new google.maps.LatLng(52.157927, 4.704895);
    var myOptions = {
      zoom: 10,
      center: latlng,
      disableDefaultUI: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("google_map"),
        myOptions);
    var trafficLayer = new google.maps.TrafficLayer();    
    trafficLayer.setMap(map);
    updateTrafficOnMap(map, trafficLayer);    
}

The last call is to this function:

function updateTrafficOnMap(map, overlay)
{
    overlay.setMap();
    overlay = null;
    var trafficLayer = new google.maps.TrafficLayer();    
    trafficLayer.setMap(map);

    setTimeout(function(){ updateTrafficOnMap(map, trafficLayer) }, 60000);
}

Which is supposed to update the traffic layer every minute.

Now the div is loaded correctly on page load, the layer is loaded too. However, this never updates, so there's no real time traffic information unless you reload the whole page.

Anyone knows the magic word to make the traffic layer refresh properly?

In my Rails app, the background consists of a fullscreen div with Google Maps and a traffic layer. This is what gets called on page load:

$(function () {  
  updateMap();
});

The updateMap function creates a Google Map on the div element 'google_map':

function updateMap()  {
      var latlng = new google.maps.LatLng(52.157927, 4.704895);
    var myOptions = {
      zoom: 10,
      center: latlng,
      disableDefaultUI: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("google_map"),
        myOptions);
    var trafficLayer = new google.maps.TrafficLayer();    
    trafficLayer.setMap(map);
    updateTrafficOnMap(map, trafficLayer);    
}

The last call is to this function:

function updateTrafficOnMap(map, overlay)
{
    overlay.setMap();
    overlay = null;
    var trafficLayer = new google.maps.TrafficLayer();    
    trafficLayer.setMap(map);

    setTimeout(function(){ updateTrafficOnMap(map, trafficLayer) }, 60000);
}

Which is supposed to update the traffic layer every minute.

Now the div is loaded correctly on page load, the layer is loaded too. However, this never updates, so there's no real time traffic information unless you reload the whole page.

Anyone knows the magic word to make the traffic layer refresh properly?

• javascript
• ruby-on-rails-3
• google-maps

Share Improve this question Follow asked Oct 5, 2011 at 9:16 HTBRHTBR 1,02311 gold badge1010 silver badges2222 bronze badges 2

• Shouldn't it be overlay.setMap(null); – duncan Commented Oct 5, 2011 at 14:21
• @duncan that amounts to the same thing. However, I got a solution myself. See below. – HTBR Commented Oct 29, 2011 at 15:21

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

So I found the answer. Apparently you cannot update the map with a new overlay while inside the timeOut function. I do not know why exactly (as for instance a 'alert()' does show while inside the function). I solved it using a switch statement in the updateOnTrafficMap function, so that once every minute the layout disappears, and immediately reappears using another timeOut (set to 1 ms).

function updateMap()  {
  // the following creates a Google Map with zoom level 10 and the LatLong coordinates
  // stated below
  var latlng = new google.maps.LatLng(52.053335, 4.917755);
  var myOptions = {
    zoom: 10,
    center: latlng,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("google_map"), myOptions);
  updateTrafficOnMap(map, null, 1);
}

function updateTrafficOnMap(map, trafficLayer, on)
{
  if(on == 0) {
    trafficLayer.setMap(null);
    setTimeout(function() { updateTrafficOnMap(map, null, 1) }, 1) 
  }
  if(on == 1) {
    var trafficLayer2 = new google.maps.TrafficLayer();
    trafficLayer2.setMap(map);
    // after 300ms (or 5 minutes) update the traffic map
    setTimeout(function() { updateTrafficOnMap(map, trafficLayer2, 0)}, 300000)
  }
}

On document load you call the updateMap() function, and you should have a DIV with id "google_map" to display the map in of course.

This worked for me:

var _mainMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var _gmapTrLayer = new google.maps.TrafficLayer();
_gmapTrLayer.setMap(_mainMap);
setInterval(refreshGmapsTrafficLayer, 60000); // runs every minute

function refreshGmapsTrafficLayer() {
    _gmapTrLayer.setMap(null);
    _gmapTrLayer.setMap(_mainMap);
}

A setInterval over the whole initialize routine got me the refreshing that I desired. options.ts_google_map_traffic_refresh_milliseconds is set to the milliseconds you desire.

 setInterval(_ts_map_initialize, options.ts_google_map_traffic_refresh_milliseconds);

    function _ts_map_initialize(){              
        console.log('function _ts_map_initialize()')
        var myLatlng = new google.maps.LatLng(options.ts_google_map_traffic_latHome,options.ts_google_map_traffic_lonHome);
        var myOptions = {
          zoom: ts_int_zoomLevel,
          center: myLatlng,
          panControl: false,              
          zoomControl: false,
          streetViewControl: false,
          overviewMapControl: false,              
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          styles:[{
              featureType:"poi",
              elementType:"labels",
              stylers:[{
                  visibility:"off"
              }]
          }]              
        }
        map = new google.maps.Map(document.getElementById('ts_google_map_traffic_canvas'), myOptions);
        defaultBounds = map.getBounds();

        trafficLayer = new  google.maps.TrafficLayer(); //add the layer - don't view it unless user toggles button  

        trafficLayer.setMap(map);

}

enter code here

本文标签： javascriptGoogle Maps refresh traffic layerStack Overflow