I'm trying to include googlemaps in my MEAN stack app. I have set up a googleMap directive and I'm pulling in the lat lng coordinates from some seeded test data. If I hard code the lat lng then the map renders however, pulling it in from the db I just get a grey square. So google maps can't find the lat lng it needs to show a map.
Schedule is my resource and I've included the relevant tags in my meta data.
My googleMap directive below:
angular.module('yogaApp')
.directive('googleMap', googleMap);
googleMap.$inject = ['$window'];
function googleMap($window) {
return {
restrict: 'E',
replace: true,
template: '<div class="google-map">Google Map HERE!!</div>',
scope: {
schedule: '=',
},
link: function(scope, element) {
scope.$watch('schedule', () => {
if(scope.schedule) {
console.log(scope.schedule);
console.log(scope.schedule.location);
const map = new $window.google.maps.Map(element[0], {
// center: {lat: 51.4638587, lng: -2.6113025}, THIS WORKS
center: scope.schedule.location,
zoom: 15,
scrollwheel: false
});
}
});
}
};
}
the console log marked schedule returns the promsie, with the location object (including lat lng) however from consoleLog(schedule.location) I get undefined.
see screen shot:
console log results
This is why my map isn't rendering (obviously can't show a map without the lat lng) and I think it's due to the asynchronous nature of JS, so possibly all I need to add is a call back function?
