0

I've been trying to make the map I have with google maps to refresh the traffic layer for nearly 2 hours. I think by now I read almost every single one of the questions that are in here but all of the solutions don't work for me.

This is my code:

function initMap() {
  var styles = [
    ...
  ];

  var styledMap = new google.maps.StyledMapType(styles, {name: 'Stryled Map'});

  var mapOptions = {
    zoom: 17,
    center: new google.maps.LatLng(4.6903, -74.0498),
    disableDefaultUI: true
  }

  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
}

It is inside a jade template. Thanks a lot.

Edit:

The linked question marked as duplicated was already implemented before asking, I found it here on Stackoverflow but it is not working, the interval works fine but there is no update even after 5 minutes. It may be due to the fact that I have already defined a custom style (as you can see in my code) which makes the map dark.

Edit 2:

Tried this as well with a longer timeout to see the blink when the previous layer is removed on the redraw but it is only giving me back the same map again and again, traffic is not changing.

Edit 3:

Testing I found what could be the problem. Using this function if I set the first timeOut to less than 400ms (the delay it has before repainting the map again), then the map will never bring new traffic data.

updateTrafficOnMap(map, null, 1);

function updateTrafficOnMap(map, trafficLayer, on) {
  if ( on == 0 ) {
    trafficLayer.setMap(null);
    setTimeout(function() {
      updateTrafficOnMap(map, null, 1)
    }, 400);
  }
  if ( on == 1 ) {
    var trafficLayer2 = new google.maps.TrafficLayer();
    trafficLayer2.setMap(map);
    setTimeout(function() {
      updateTrafficOnMap(map, trafficLayer2, 0)
    }, 5000);
  }  
}

So the problem now is that I have a blinking map that shows and hides the traffic data 5000ms.

Edit 4:

As requested here is the style object for the map.

var styles = [
  {
    "featureType": "road.local",
    "elementType": "geometry",
    "stylers": [
      { "visibility": "simplified" }
    ]
  },{
    "featureType": "road.local",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "labels",
    "stylers": [
      { "weight": 0.1 },
      { "saturation": 18 }
    ]
  },{
    "featureType": "landscape.man_made",
    "stylers": [
      { "color": "#242424" }
    ]
  },{
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      { "color": "#808080" }
    ]
  },{
    "featureType": "poi.park",
    "stylers": [
      { "color": "#2d2d2d" }
    ]
  },{
    "featureType": "water",
    "stylers": [
      { "color": "#999999" }
    ]
  },{
    "featureType": "road",
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "road",
    "elementType": "labels.text.stroke",
    "stylers": [
      { "color": "#808080" }
    ]
  },{
    "featureType": "poi",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "administrative.neighborhood",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "road.highway",
    "elementType": "geometry.stroke",
    "stylers": [
      { "color": "#777777" }
    ]
  },{
    "featureType": "landscape.natural",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#242424" }
    ]
  },{
    "featureType": "poi",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#111111" }
    ]
  }
];
Community
  • 1
  • 1
migsan
  • 51
  • 8

0 Answers0