Google Maps Changing Opacity of custom Line - google-maps

Question

This should have a simple answer but I can't seem to find it right now.
I have a polyline depicting a route as follows:
var lineSymbol2 = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 2
};
ORoute = new google.maps.Polyline({
path: ORouteLine,
strokeOpacity: 0,
strokeWeight: 1,
geodesic: true,
strokeColor: '#00FFFF',
zIndex: -10,
visible: false,
icons: [{
icon: lineSymbol2,
offset: '0',
repeat: '10px'
}],
map: map
});
It displays perfectly, but is there a way to change the opacity of the dashed line, eg to make it fade in over time, going from transparent to opaque? I have many lines showing the same dashed appearance. I should know the answer to this but I'm in a bit of a mind fog at present.
Btw, I've set the visible field to true elsewhere as I'm toggling the line

Answer 1

If you want to dynamically change the opacity of the symbol on the polyline, you need a setTimeout or setInterval function that does that.
var opacity = 0;
var intervalHandler = setInterval(function() {
if (opacity >= 1) {
opacity = 1;
var icons = ORoute.get("icons");
icons[0].icon.strokeOpacity = opacity;
ORoute.setOptions({icons:icons});
clearInterval(intervalHandler);
} else {
opacity += 0.01;
if (opacity >= 1) opacity = 1;
var icons = ORoute.get("icons");
icons[0].icon.strokeOpacity = opacity;
ORoute.setOptions({icons:icons});
}
}, 100)
proof of concept fiddle
code snippet:
var map;
var ORoute;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {
lat: 0,
lng: -180
},
mapTypeId: 'terrain'
});
var ORouteLine = [
{lat: 37.772, lng: -122.214},
{lat: 21.291, lng: -157.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
];
var lineSymbol2 = {
path: 'M 0,-1 0,1',
strokeOpacity: 0,
scale: 2
};
ORoute = new google.maps.Polyline({
path: ORouteLine,
strokeOpacity: 0,
strokeWeight: 1,
geodesic: true,
strokeColor: '#000000',
zIndex: -10,
visible: true,
icons: [{
icon: lineSymbol2,
offset: '0',
repeat: '10px'
}],
map: map
});
var opacity = 0;
var intervalHandler = setInterval(function() {
if (opacity >= 1) {
opacity = 1;
var icons = ORoute.get("icons");
icons[0].icon.strokeOpacity = opacity;
ORoute.setOptions({icons:icons});
clearInterval(intervalHandler);
} else {
opacity += 0.01;
if (opacity >= 1) opacity = 1;
var icons = ORoute.get("icons");
icons[0].icon.strokeOpacity = opacity;
ORoute.setOptions({icons:icons});
}
}, 100)
}
html,
body, #map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>