Angularjs google maps API drawing polyline

Question

Following code snippet gives me output as (basically on each click a new marker is added and I am fetching it's lat and long values):

0: Latitude: 40.207196906764054 Longitude: -99.68994140625
1: Latitude: 40.202477129519124 Longitude: -99.60823059082031

Code snippet:

$scope.map.markers.push(marker);
// console.log($scope.map.markers);

for (var item in $scope.map.markers) {
  console.log(item +': '+ "Latitude: " +    $scope.map.markers[item].coords.latitude + " " + "Longitude: " + $scope.map.markers[item].coords.longitude);
}

To draw a polyline I need array in such format:

var flightPlanCoordinates = [
{lat: 37.772, lng: -122.214},
{lat: 21.291, lng: -157.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
];

I basically want to draw lines along these markers. How can I construct such a structure inside my for loop to add these lat and long values which I can feed to 'Path' variable for Polilines?

Does the for (var item in $scope.map.markers) { cycle work for you? does it print the coordinates it should? or do you need help with that part as well? — Matej P.
– Matej P., Commented Jun 11, 2016 at 12:15
yes it gives me output as shown in first screenshot, the list will keep increasing on each click — Thinker
– Thinker, Commented Jun 11, 2016 at 12:17

Matej P. · Accepted Answer · 2016-06-11 12:20:12Z

2

You should be able to loop trough the markers and add their coordinates into an empty array (provided the for cycle you shown works):

var myCoordinates = [];
for (var item in $scope.map.markers) {
     myCoordinates.push({lat: $scope.map.markers[item].coords.latitude, lng: $scope.map.markers[item].coords.longitude});
}

and then use myCoordinates array the same way you would use flightPlanCoordinates to create a polyline, e.g.:

var myPolyline = new google.maps.Polyline({
    path: myCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: map
});

answered Jun 11, 2016 at 12:20

Matej P.

5,3921 gold badge30 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thinker Over a year ago

It works perfect! Thanks! One further question, I can post it as a separate one if the answer is big: Would it be possible in this particular case with whatever code I have written to join let's say three or some specific number of markers to form a polygon and corresponding area can be computed?

Thinker Over a year ago

Polygon was also a simple solution, just referred the official documentation. It worked perfect.

Collectives™ on Stack Overflow

Angularjs google maps API drawing polyline

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related