title: Angularjs Google maps connect multiple markers
body: <p>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. </p>
  
  <p>I have following (map is shown on the screen, I can add multiple markers):</p>
  
  <p><strong>Controller:</strong></p>
  
  <pre><code>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();
          }
      }
      }
  });
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>   &lt;ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" events="map.events"&gt;
       &lt;ui-gmap-marker ng-repeat="m in map.markers" coords="m.coords" icon="m.icon" idkey="m.id"&gt;&lt;/ui-gmap-marker&gt;
     &lt;/ui-gmap-google-map&gt;
  </code></pre>
  
  <p>How can I proceed further? Code snippets?</p>