Trying to implement the GoogleMapsAPI but facing issues with displaying the map in the directory template. Check out the following markup and code snippet:
<gmap-locator></gmap-locator>.
app.directive('gmapLocator', function () {
var link = function (scope, element, attrs) {
var map, mapOptions, markers;
var lat = scope.mapParameters.initialSettings.Lat;
var lng = scope.mapParameters.initialSettings.Lng;
mapOptions = {
mapTypeId : google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(lat, lng),
zoom: scope.mapParameters.initialSettings.zoom
};
function initMap() {
if (map === void 0) {
map = new google.maps.Map(element[0], mapOptions);
}
}
initMap();
}
return {
restrict: 'EA',
scope: {
mapParameters: '='
},
template: "<div id='gomap' style='height: 400px;width:300px'></div>",
controller: controller,
link: link
}
return {
restrict: 'EA',
template: '<div id="gomap" style="width: 450px;height:400px;"></div>',
link: link
};
});
Encountering an issue where the Google Maps library fails to detect the target div and display the map.