Angularjs Google maps connect multiple markers -

i building ionic app , therein have following requirement: want use google maps , want able mark 3 markers on map -> connect 3 markers automatically -> , calculate area covered.

i have following (map shown on screen, 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 proceed further? code snippets?

to connect markers utilize google.maps.polyline object, in angular google maps library there ui-gmap-polyline directive 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>