Search code examples
javascriptgoogle-mapsgoogle-polyline

Plotting multiple polylines on Google Maps

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.Map of multiple polylines

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>
Solution

  • I think you want this: working fiddle

    Each pair of coordinates defines a single line segment. After drawing each line segment, start a new array of points and a new google.maps.Polyline.

    working code snippet:

    var map;
var trackLine = [];
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: 1,
    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++) {
      trackCoords = [];
      for (k = 0; k < 2; k++) {
        trackCoords.push(new google.maps.LatLng(trackLats[i][j][k],
          trackLons[i][j][k]));
      }

      trackLine.push(new google.maps.Polyline({
        map: map,
        path: trackCoords,
        geodesic: true,
        strokeColor: '#FFFFFF',
        strokeOpacity: 0.4,
        strokeWeight: 3
      }));

      trackCoords.clear;
    }
  }
}

google.maps.event.addDomListener(window, 'load', initialize);
    html,
body,
#map-canvas {
  height: 90%;
  margin: 5px;
  padding: 1px;
}
    <script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>