Angularjs Google maps connect multiple markers

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>