5

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 the users Geo Location and multiple markers around the area.

I've got the Geo Location working, but can't seem to add multiple markers.

Locations 

var markers = [
    {'London Eye, London', 51.503454,-0.119562},
    {'Palace of Westminster, London', 51.499633,-0.124755}
];

Controller.JS

// 1. Google Map // 
FCCAppCtrl.controller('MapController', function($scope, $ionicLoading) {
    $scope.initialise = function() {
        var myLatlng = new google.maps.LatLng(37.3000, -120.4833);
        var mapOptions = {
            center: myLatlng,
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);

        navigator.geolocation.getCurrentPosition(function(pos) {
            map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
            var myLocation = new google.maps.Marker({
                position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
                map: map,
                animation: google.maps.Animation.DROP,
                title: "My Location"
            });
        });
        $scope.map = map;
    };
    google.maps.event.addDomListener(document.getElementById("map"), 'load', $scope.initialise());
});
Improve this question
1
  • You have an array markers but I don't see anywhere in your Controller that references that... is there some additional code missing from your question? Presumably you don't need that to be part of the geolocation request; just loop over the markers array in your initialise function, adding a new Marker for each Commented Apr 27, 2015 at 11:11

2 Answers 2

Reset to default
10 
// 1. Google Map // 
var cities = [
    {
        city : 'Location 1',
        desc : 'Test',
        lat : 52.238983,
        long : -0.888509 
    },
    {
        city : 'Location 2',
        desc : 'Test',
        lat : 52.238168,
        long : -52.238168
    },
    {
        city : 'Location 3',
        desc : 'Test',
        lat : 52.242452,
        long : -0.889882 
    },
    {
        city : 'Location 4',
        desc : 'Test',
        lat : 52.247234,
        long : -0.893567 
    },
    {
        city : 'Location 5',
        desc : 'Test',
        lat : 52.241874,
        long : -0.883568 
    }
];

FCCAppCtrl.controller('MapController', function($scope, $ionicLoading) {
    // Map Settings //
    $scope.initialise = function() {
        var myLatlng = new google.maps.LatLng(37.3000, -120.4833);
        var mapOptions = {
            center: myLatlng,
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);
      // Geo Location /
        navigator.geolocation.getCurrentPosition(function(pos) {
            map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
            var myLocation = new google.maps.Marker({
                position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
                map: map,
                animation: google.maps.Animation.DROP,
                title: "My Location"
            });
        });
        $scope.map = map;
        // Additional Markers //
        $scope.markers = [];
        var infoWindow = new google.maps.InfoWindow();
        var createMarker = function (info){
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(info.lat, info.long),
                map: $scope.map,
                animation: google.maps.Animation.DROP,
                title: info.city
            });
            marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';
            google.maps.event.addListener(marker, 'click', function(){
                infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
                infoWindow.open($scope.map, marker);
            });
            $scope.markers.push(marker);
        }  
        for (i = 0; i < cities.length; i++){
            createMarker(cities[i]);
        }

    };
    google.maps.event.addDomListener(document.getElementById("map"), 'load', $scope.initialise());

});
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Good solution. I have one question. Why do we need to store the markers? '$scope.markers.push(marker);'? Is this really necessary?
markers not working for me. Can please provide html css also .(I am new to this)
4

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: '<div></div>',
    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"
}
]
Improve this answer

1 Comment

can you please provide html css also OR if possible git repo url

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.