Angularjs Google maps connect multiple markers - angularjs

Question

I am building an Ionic app and therein I have the following requirement:
I want to use Google maps and I want to be able to mark three markers on the map -> connect those three markers automatically -> and calculate the area it covered.
I have following (map is shown on the screen, I can add multiple markers):
Controller:
angular.extend($scope, {
map: {
center: {
latitude: 51.718921,
longitude: 8.757509
},
zoom: 11,
markers: [],
events: {
click: function (map, eventName, originalEventArgs) {
var e = originalEventArgs[0];
var lat = e.latLng.lat(),lon = e.latLng.lng();
var marker = {
id: Date.now(),
icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
coords: {
latitude: lat,
longitude: lon
},
};
$scope.map.markers.push(marker);
console.log($scope.map.markers);
$scope.$apply();
}
}
}
});
HTML:
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" events="map.events">
<ui-gmap-marker ng-repeat="m in map.markers" coords="m.coords" icon="m.icon" idkey="m.id"></ui-gmap-marker>
</ui-gmap-google-map>
How can I proceed further? Code snippets?

Answer 1

To connect markers you could utilize google.maps.Polyline object, in Angular Google Maps library there is a ui-gmap-polyline directive for that purpose.
Example
angular.module('map-example', ['uiGmapgoogle-maps'])
.controller('MapController', function ($scope, $http, uiGmapGoogleMapApi, uiGmapIsReady) {
$scope.map = {
zoom: 2,
bounds: {},
center: { latitude: 0.0, longitude: 180.0 },
markers: [
{ "id": 1, "coords": { "latitude": 37.772323, "longitude": -122.214897 } },
{ "id": 2, "coords": { "latitude": 21.291982, "longitude": -157.821856 } },
{ "id": 3, "coords": { "latitude": -18.142599, "longitude": 178.431 } },
{ "id": 4, "coords": { "latitude": -27.46758, "longitude": 153.027892 } }
]
};
$scope.map.polyline =
{
"path": $scope.map.markers.map(function (m) {
return {
"latitude": m.coords.latitude,
"longitude": m.coords.longitude
};
}),
"stroke": {
"color": '#6060FB',
"weight": 3
},
"geodesic": true,
"visible": true
};
});
.angular-google-map-container {
height: 450px;
width: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.1/lodash.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script>
<script src="https://cdn.rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.min.js"></script>
<div ng-app="map-example" ng-controller="MapController">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" events="map.events">
<ui-gmap-marker ng-repeat="m in map.markers" coords="m.coords" icon="m.icon" idkey="m.id"></ui-gmap-marker>
<ui-gmap-polyline path="map.polyline.path" stroke="map.polyline.stroke" visible='map.polyline.visible' geodesic='map.polyline.geodesic' fit="false"></ui-gmap-polyline>
</ui-gmap-google-map>
</div>