Google Maps Angular loop through callback to show multiple markers - angularjs

Question

I'm trying to display markers on a map, but I am running in to difficulty, I'm not too skilled in the use of callbacks, can someone help me out thanks? I want multiple markers to show where different games are.
I'm using a rest api to retrieve the game details from the db, and I know this works, it's just after I retrieve them I can no longer access the data that has just been retrieved.
I am using ionic (Angular) and I am sure there is probably a better way of doing this. What is the best way to use a loop? If anyone could point out how I could improve my code. Here is what my controller for the map looks like
.controller('MapController', function($scope, $ionicLoading, gameFactory) {
$scope.initialise = function() {
...//set up map
});
$scope.map = map;
};
$scope.showGameMarkers = function() {
var map = document.getElementById("map");
gameFactory.getGames().success(function(data) {
//at this stage the data variable contains the details of my game
angular.forEach(data, function(key, data) {
//now data is empty
var latLng = new google.maps.LatLng(data.locationLatitude, data.locationLongitude);
console.log("latlang = "+latLng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
title: data.locationName,
setMap : map
});
});
}).error(function(data) {
console.log("no games");
});
};
google.maps.event.addDomListener(document.getElementById("map"), 'load', $scope.initialise());
google.maps.event.addDomListener(document.getElementById("map"), 'load', $scope.showGameMarkers());
});
Thank you in advance!

Answer 1

It looks like you might have your key and data parameters reversed in your forEach loop. According to https://docs.angularjs.org/api/ng/function/angular.forEach it should be
angular.forEach(values, function(value, key) {
...
}