Google Maps API v3 - change strokeWeight of polylines for different zoom levels

Question

I have use Google Maps API v3 to create polylines representing trails on numerous maps. There are multiple polylines on each map. When zoomed out I would like the polylines to have a lighter strokeWeight, but heavier when zoomed in. I tried adding a zoom change listener and have it change a variable value for the strokeWeight, but it doesn't appear to work. I need Google to somehow redo the google.maps.Polyline({...}). Also, I need to do this globally, as I said, I have many polylines on each map.

I did do research on this, as it must be a common issue, but I didn't find anything on this topic.

Does anyone have an approach for this?

var polyWidth = 8;
var eiffellouvrePath = new google.maps.Polyline({
    path: eiffellouvre,
    strokeColor: '#aa0022',
    strokeOpacity: .8,
    strokeWeight: polyWidth
});

eiffellouvrePath.setMap(map);
/************************************************/
google.maps.event.addListener(map, 'zoom_changed', function() {
    var zoom = map.getZoom();
    if (zoom <= 10) {
        polyWidth = 3;
    } else {
        polyWidth = 8;
    }
});

Answer 1

I think you need to actually update the Polyline's width here, so:

google.maps.event.addListener(map, 'zoom_changed', function() {
  var zoom = map.getZoom();
  if (zoom <= 10) {
    eifellouvrePath.setOptions({strokeWeight: 3});
  } else {
    eifellouvrePath.setOptions({strokeWeight: 8});
  }
});

If you need to do this globally, I would suggest storing your polylines and running through each one to update its strokeWeight.

EDIT

You've mentioned you want to create and apply this stroke width change to multiple Polylines.

Here's one way to do that.

var paths = [];
// Fill paths with the Arrays of LatLngs describing the Polyline path.

var polylines = [];
for (var i = 0; paths[i]; ++i) {
  // Create a new function scope.
  function(i) {
    var poly;
    poly = polylines[i] = new google.maps.Polyline({
      path: paths[i],
      strokeColor: '#aa0022',
      strokeOpacity: .8,
      strokeWeight: (map.getZoom() <= 10) ? 3 : 8
    });
    poly.setMap(map);

    google.maps.event.addListener(map, 'zoom_changed', function() {
      var zoom = map.getZoom();
      if (zoom <= 10) {
        poly.setOptions({strokeWeight: 3});
      } else {
        poly.setOptions({strokeWeight: 8});
      }
    });
  }(i);
}

Answer 2

You need to set the strokeWeight option of the polyline (eiffellouvrePath).

polyWidth = 3;
eiffellouvrePath.setOptions({
  strokeWeight: polyWidth
});

Proof of concept fiddle,

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var eiffellouvre = [new google.maps.LatLng(37.4419, -122.1419),
    new google.maps.LatLng(37.4419, -122.2)
  ]
  var polyWidth = 8;
  var eiffellouvrePath = new google.maps.Polyline({
    path: eiffellouvre,
    strokeColor: '#aa0022',
    strokeOpacity: .8,
    strokeWeight: polyWidth
  });

  eiffellouvrePath.setMap(map);

  google.maps.event.addListener(map, 'zoom_changed', function() {
    var zoom = map.getZoom();
    if (zoom <= 10) {
      polyWidth = 3;
      eiffellouvrePath.setOptions({
        strokeWeight: polyWidth
      });
    } else {
      polyWidth = 8;
      eiffellouvrePath.setOptions({
        strokeWeight: polyWidth
      });
    }
    document.getElementById('info').innerHTML = polyWidth;
  });


}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
<div id="info"></div>