Create Multiple stacked polylines on Google map with different colours - google-maps

Question

Looking to create multiple routes from Location a to location B using Polylines on Google map.
I am having issue in giving colours to two polylines stacked over each other.
Basic use is to show progress in route traversed from A to B with the one already covered in orange and the left route in grey colour.
I am able to give colour to only one Polyline. The other polyline superimposed is not seen even when opacity of the top polyline is reduced.
See JSfiddle- https://jsfiddle.net/8yx3vLo6/3/
I am able to give colour to only one Polyline. The other polyline superimposed/stacked is not seen even when opacity of the top polyline is reduced.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 0, lng: -180},
mapTypeId: 'terrain'
});
var flightPlanCoordinates = [
{lat: 37.772, lng: -122.220},
{lat: 21.291, lng: -160.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: 'red',
strokeOpacity: 1.0,
strokeWeight: 1
});
flightPath.setMap(map);
var map1 = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 0, lng: -180},
mapTypeId: 'terrain'
});
var flightPlanCoordinates1 = [
{lat: 17.772, lng: -35.220},
{lat: 21.291, lng: -160.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
];
var flightPath1 = new google.maps.Polyline({
path: flightPlanCoordinates1,
geodesic: true,
strokeColor: '#000',
strokeOpacity: 1,
strokeWeight: 1
});
flightPath1.setMap(map1);
}

Answer 1

You currently have 2 maps (map and map1). One polyline is on map the other on map1. First thing you need to do is put each polyline on the same map.
To make it so you can see both, put one on top of the other, with the one on top having a smaller stroke.
var flightPlanCoordinates = [
{lat: 37.772, lng: -122.220},
{lat: 21.291, lng: -160.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: 'yellow',
strokeOpacity: 1.0,
strokeWeight: 6 // first polyline added is on bottom, make stroke bigger
});
flightPath.setMap(map);
var flightPlanCoordinates1 = [
{lat: 37.772, lng: -122.220},
{lat: 21.291, lng: -160.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
];
var flightPath1 = new google.maps.Polyline({
path: flightPlanCoordinates1,
geodesic: true,
strokeColor: 'blue',
strokeOpacity: 1.0,
strokeWeight: 2 // second polyline added is on top, make stroke smaller
});
flightPath1.setMap(map);
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {
lat: 0,
lng: -180
},
mapTypeId: 'terrain'
});
var flightPlanCoordinates = [
{lat: 37.772, lng: -122.220},
{lat: 21.291, lng: -160.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: 'yellow',
strokeOpacity: 1.0,
strokeWeight: 6 // first polyline added is on bottom, make stroke bigger
});
flightPath.setMap(map);
var flightPlanCoordinates1 = [
{lat: 37.772, lng: -122.220},
{lat: 21.291, lng: -160.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
];
var flightPath1 = new google.maps.Polyline({
path: flightPlanCoordinates1,
geodesic: true,
strokeColor: 'blue',
strokeOpacity: 1.0,
strokeWeight: 2 // second polyline added is on top, make stroke smaller
});
flightPath1.setMap(map);
var bounds = new google.maps.LatLngBounds();
bounds.extend(flightPlanCoordinates1[0]);
bounds.extend(flightPlanCoordinates1[3]);
map.fitBounds(bounds);
}
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>