Currently, I am attempting to integrate Google Maps into the application that I am developing. Utilizing the Places API for certain functionalities has been successful thus far. However, I have encountered an issue when trying to display a map on a specific page - the map simply does not show up. Interestingly, there are no error messages presented in the console even when executing the following code.
index.html
<script src="https://maps.googleapis.com/maps/api/js?key=mykey&libraries=places"></script>
mapview.html
<div ng-controller="MapViewController as mapctrl" ng-init="initialize()">
<div class="container">
<div class="row">
<div id="map"></div>
</div>
<div ui-view></div>
</div>
</div>
mapViewController.js
(function(angular) {
angular.module('myapp').controller('MapViewController', ['$state','$http','$stateParams','$window','$route','$document','$localStorage','$scope','$location', function($state,$http,$stateParams,$window,$route,$document,$localStorage,$scope,$location) {
$scope.initialize = function(){
console.log("log");
var mapOptions = {
zoom: 11,
center: {lat: -34.397, lng: 150.644},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
};
}]);
})(angular)
Although the log message is displayed upon controller initialization, the map fails to appear on the page. If possible, I would like to resolve this issue without resorting to using any directives. Any guidance on achieving this would be greatly appreciated.