Google Maps API - Drawing Polyline\Flight Path with Lat Lng coordinates in a array

Question

Any ideas on how to draw polyline between markers, where the lat lng coordinate are in an array.

Array locations contains coordinates Home, and other locations. I am able to drop markers using the coordinates in the array, the next thing i need to do is do polylines between Home -> Location 1, Home -> Location 2...and so on.

--------------------------
<script
var locations =[
            //Starting Point is "Home", and links to other locations"//
            ['Home', 37.774930, -122.419416],
            ['Location-1', 35.689487, 139.691706],
            ['Location-2', 48.856614, 2.352222],
            ['Location-3', -33.867487, 151.206990]
            ]   
function initMap() {
    var myLatLng = {lat: 12.363, lng: -131.044};
    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: {lat:0,lng:0}
    }); 
    var markers = new Array();
    // Add the markers and infowindows to the map
    for (var i = 0; i < locations.length; i++) {  
        var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        title:locations[i][0],
        map: map
        })
    }
    if (i > 0){
    var startpoint = {"lat": locations[0][1], "long": locations[0][2]};
    var endpoint = {"lat": locations[i][1], "long": locations[i][2]};
    var locationlinks = [   
        new google.maps.LatLng(startpoint.lat, startpoint.long),
        new google.maps.LatLng(endpoint.lat, endpoint.long)
    ];
    var sitepath = new google.maps.Polyline({
        path: locationlinks,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    };
    sitepath.setMap(map);
}   
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBX8Q6FDpU0K9nkVCN7PpxSFybF-2FQem0&callback=initMap"></script>

As a test changing, locations [i][1], [i][2] to specific array objects works, so it seems like something with the variable that might not be working with array object.

var endpoint = {"lat": locations[2][1], "long": locations[2][2]};

The posted code is using the Google Maps Javascript API v3 not v2, changed tag. — geocodezip, Jan 29 '16 at 17:43
When your code exits the loop `i` = 4. `var endpoint = {"lat": locations[i][1], "long": locations[i][2]};` is not defined. Use `locations.length-1`. — geocodezip, Jan 29 '16 at 17:48
related question; [create elevation chart from markers and a HUB](http://stackoverflow.com/questions/34375548/create-elevation-chart-from-markers-and-a-hub) (you want the polylines, not the elevations graphs) — geocodezip, Jan 29 '16 at 17:55
So something like this - var endpoint = {"lat": locations[locations.length-1][1], "long": locations[locations.length-1][2]}; ? — Shiva, Jan 29 '16 at 17:56
Yup. Setting `i` inside the `if i>0` block to `i=locations.length-1` [works for me as well](http://jsfiddle.net/smkxfknw/) — geocodezip, Jan 29 '16 at 18:31

score 4 · Accepted Answer · answered Jan 29 '16 at 22:30

You are close. You need to move the if i > 0 test inside the marker creation loop. I found it simpler to use the markers to retrieve the coordinates for the start and end of the polylines.

proof of concept fiddle

code snippet:

var locations = [
  //Starting Point is "Home", and links to other locations"//
  ['Home', 37.774930, -122.419416],
  ['Location-1', 35.689487, 139.691706],
  ['Location-2', 48.856614, 2.352222],
  ['Location-3', -33.867487, 151.206990]
]

function initMap() {
  var myLatLng = {
    lat: 12.363,
    lng: -131.044
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: {
      lat: 0,
      lng: 0
    }
  });
  var markers = [];
  var bounds = new google.maps.LatLngBounds();
  // Add the markers and infowindows to the map
  for (var i = 0; i < locations.length; i++) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      title: locations[i][0],
      map: map
    })
    markers.push(marker); // push the marker onto the array
    bounds.extend(marker.getPosition());
    if (i > 0) { // move this inside the marker creation loop
      var sitepath = new google.maps.Polyline({
        // use the markers in for the coordinates
        path: [markers[0].getPosition(), marker.getPosition()],
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
        map: map
      });
    }
  }
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

score 0 · Answer 2 · answered Jun 16 '17 at 10:48

For any one using this great react-maps implementation use:

    <GoogleMap
        ...props, markers, etc...
        <Polyline
            path = {[{ lat: lat, lng: lng },{ lat: lat, lng: lng }]}
            options={{
                geodesic: true,
                strokeColor: '#0c3351',
                strokeOpacity: 1.0,
                strokeWeight: 2
            }}
        />
   </GoogleMap>

Google Maps API - Drawing Polyline\Flight Path with Lat Lng coordinates in a array

2 Answers2