I am currently integrating the Google Maps Angular directive into my application and facing an issue when trying to encapsulate that directive within another custom directive. The functionality works as expected when I define the map object in the controller. However, if I attempt to define the map object inside the link function, it fails to recognize the map object.
I experimented with defining the map object within the directive's controller, but encountered the same problem where the map failed to load. It seems like the scope initialization is happening after the HTML is loaded, which might be causing the map not to display properly. I'm struggling to understand why this behavior occurs. Is there a different approach I can take to define the map object within the directive instead of relying on an external controller?
Upon examining the Google Map's scope (using angular.element("google-map >").scope()), I noticed that the center property is indeed defined, so I'm puzzled by why the map isn't loading correctly.
var app = angular.module('myApp',[
'google-maps',
])
app.directive('myDir', function($http) {
return {
restrict: 'AE',
template: '<google-map center="map.center" zoom="13" draggable="true" pan= "1" control="map.control"></google-map>',
link: function(scope, elem, attrs) {
scope.map = {
center: {
latitude: 40.35,
longitude: -74.6702
},
control:{}
}
},
};
});