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;
}
});
You need to set the strokeWeight option of the polyline (
eiffellouvrePath
).Proof of concept fiddle,