I'm new to programming with Javascript and Google Maps so this may be a pretty simple question. I would like to plot multiple polylines on a Google Map. I have code written that draws the lines but they are all connected instead of discrete. I've tried implementing several solutions I found here but either the map doesn't display at all or else it does and the polylines are all still connected. See the attached image of the flawed result.
Does anyone have any suggestions to correct this problem? Thanks for your help. Code below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas
{
height: 90%;
margin: 5px;
padding: 1px;
}
</style>
</head>
<body>
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3"
type="text/javascript">
</script>
<script>
var map;
var trackLats = [ [ [ 14.735, -20.595 ], [ -13.913, 8.188 ] ],
[ [ -14.788, 20.562 ], [ 13.879, -8.230 ] ],
[ [ 14.784, -20.546 ], [ -13.818, 8.288 ] ],
[ [ -14.837, 20.513 ], [ 13.784, -8.329 ] ],
[ [ 14.892, -20.439 ], [ -13.758, 8.350 ] ] ];
var trackLons = [ [ [ 76.480, 90.967 ], [ 68.509, 98.386 ] ],
[ [ -115.254, -100.759 ], [ -123.226, -93.342 ] ],
[ [ 53.036, 67.521 ], [ 45.065, 74.937 ] ],
[ [ -138.698, -124.204 ], [ -146.669, -116.791 ] ],
[ [ 29.567, 44.049 ], [ 21.570, 51.438 ] ] ];
function initialize()
{
var mapCenter = new google.maps.LatLng(0.0, 139.0);
var mapOptions =
{
zoom: 2,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var trackCoords = new google.maps.MVCArray;
var i, j, k;
for ( i=0 ; i<5 ; i++ )
{
for ( j=0 ; j<2 ; j++ )
{
for ( k=0 ; k<2 ; k++ )
{
trackCoords.push(new google.maps.LatLng(trackLats[i][j][k],
trackLons[i][j][k]));
}
var trackLine = new google.maps.Polyline(
{
map: map,
path: trackCoords,
geodesic: true,
strokeColor: '#FFFFFF',
strokeOpacity: 0.1,
strokeWeight: 3
});
trackCoords.clear;
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
