AngularJS Google Map with Multiple Markers

Question

I\'m currently developing an Ionic Framework (AngularJS) project which uses Geo Location and Google Maps for displaying the user\'s position.

I\'m trying to display

Answer 1

here is the complete js file , you can just copy paste this

var myItemsApp = angular.module('myItemsApp', []);

myItemsApp.factory('itemsFactory', ['$http', function ($http) {
var itemsFactory = {
    itemDetails: function () {
        return $http({
                url: "pos.json",
                method: "GET"

            })
            .then(function (response) {
                return response.data;
                console.log(response.data);
            });
    }
};
return itemsFactory;

}]);




 myItemsApp.controller('ItemsController', ['$scope', 'itemsFactory', function ($scope, itemsFactory) {
var promise = itemsFactory.itemDetails();

promise.then(function (data) {
    $scope.itemDetails = data;
    console.log(data);
});
$scope.select = function (item) {
    $scope.selected = item;
};
$scope.selected = {};

$scope.selected.latitude;
 }]);


 myItemsApp.directive("myMaps", function ($timeout) {
return {
    restrict: 'E',
    template: '
',
    replace: true,
    link: function (scope, element, attrs) {
        scope.$watchCollection('selected', function () {
            var lat = scope.selected.latitude;
            var lon = scope.selected.longitude;

            var myLatLng = new google.maps.LatLng(lat, lon);
            var mapOptions = {
                center: myLatLng,
                zoom: 12,
                myTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map-canvas"),
                mapOptions);
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: "my town"
            });
            marker.setMap(map);
        });

    }
};
 });

its tested , i hope it will work for you , let me know if you need any help by the way here is the json file for better understanding

{
"snappedPoints": [
    {
        "location": {
            "latitude": -35.2784167,
            "longitude": 149.1294692
        },
        "originalIndex": 0,
        "placeId": "ChIJoR7CemhNFmsRQB9QbW7qABM"
},
    {
        "location": {
            "latitude": -35.280321693840129,
            "longitude": 149.12908274880189
        },
        "originalIndex": 1,
        "placeId": "ChIJiy6YT2hNFmsRkHZAbW7qABM"
},
    {
        "location": {
            "latitude": -35.2803415,
            "longitude": 149.1290788
        },
        "placeId": "ChIJiy6YT2hNFmsRkHZAbW7qABM"
},
    {
        "location": {
            "latitude": -35.2803415,
            "longitude": 149.1290788
        },
        "placeId": "ChIJI2FUTGhNFmsRcHpAbW7qABM"
},
    {
        "location": {
            "latitude": -35.280451499999991,
            "longitude": 149.1290784
        },
        "placeId": "ChIJI2FUTGhNFmsRcHpAbW7qABM"
},
    {
        "location": {
            "latitude": -35.2805167,
            "longitude": 149.1290879
        },
        "placeId": "ChIJI2FUTGhNFmsRcHpAbW7qABM"
},
    {
        "location": {
            "latitude": -35.2805901,
            "longitude": 149.1291104
        },
        "placeId": "ChIJI2FUTGhNFmsRcHpAbW7qABM"
},
    {
        "location": {
            "latitude": -35.2805901,
            "longitude": 149.1291104
        },
        "placeId": "ChIJW9R7smlNFmsRMH1AbW7qABM"
},
    {
        "location": {
            "latitude": -35.280734599999995,
            "longitude": 149.1291517
        },
        "placeId": "ChIJW9R7smlNFmsRMH1AbW7qABM"
},
    {
        "location": {
            "latitude": -35.2807852,
            "longitude": 149.1291716
        },
        "placeId": "ChIJW9R7smlNFmsRMH1AbW7qABM"
},
    {
        "location": {
            "latitude": -35.2808499,
            "longitude": 149.1292099
        },
        "placeId": "ChIJW9R7smlNFmsRMH1AbW7qABM"
},
    {
        "location": {
            "latitude": -35.280923099999995,
            "longitude": 149.129278
        },
        "placeId": "ChIJW9R7smlNFmsRMH1AbW7qABM"
},
    {
        "location": {
            "latitude": -35.280960897210818,
            "longitude": 149.1293250692261
        },
        "originalIndex": 2,
        "placeId": "ChIJW9R7smlNFmsRMH1AbW7qABM"
},

    {
        "location": {
            "latitude": -35.284728724835304,
            "longitude": 149.12835061713685
        },
        "originalIndex": 7,
        "placeId": "ChIJW5JAZmpNFmsRegG0-Jc80sM"
}
]