As a newcomer to Angular, I have encountered a hurdle while attempting to incorporate a 'google maps' directive inside another directive.
The following code showcases a 'modal-view' directive that loads a form:
angular.module('test').directive('modal', function () {
return {
template: '<div class="modal fade">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>' +
'<h4 class="modal-title">{{ title }}</h4>' +
'</div>' +
'<div class="modal-body" ng-transclude></div>' +
'</div>' +
'</div>' +
'</div>',
restrict: 'E',
transclude: 'element',
replace:true,
scope:false,
link: function postLink(scope, element, attrs) {
...
}
};
});
Next is the google maps directive:
angular.module('test').directive('googleMaps', function () {
return {
restrict:'E',
template:"<div></div>",
replace:true,
transclude: true,
scope:false,
link:function(scope, element, attrs){
window.onload = function() {
scope.map = new google.maps.Map(document.getElementById(attrs.id), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
scope.map.addListener('click', function() {
alert("Click!");
});
};
}
};
});
When I load the map directive independently, it displays correctly. However, the issue arises when I attempt to load the map within another directive, like so:
//modal directive
<modal title="{{title}}" visible="showModal">
<div class="row">
<div class="col-sm-12">
<form class="dropzone" dropzone="dropzoneConfig"></form>
</div>
</div>
<form role="form" name="userForm" ng-submit="addPerson(person)" novalidate>
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control" id="name" placeholder="Enter your name" ng-model="person.name" required />
</div>
//Maps directive
<google-maps id="map" class="form-group"></google-maps>
</form>
</modal>
Upon implementation, the frame loads with the Google logo but fails to display the map, leaving a grey background instead.
Any assistance on this matter would be greatly appreciated! Thank you.