After configuring Angular Google Maps and following the provided steps, I am facing an issue where the map is not loading on the directive without any error. Below is the code snippet:
Controller
app.controller('MapCtrl', [
'$scope',
'uiGmapGoogleMapApi',
function($scope, uiGmapGoogleMapApi) {
//Variables Decleration
$scope.odorizerID = "";
$scope.map = {
center: {
latitude: 45,
longitude: -73
},
zoom: 8
};
//Function Decleration
$scope.onMapClick = function(odorizerID) {
}
uiGmapGoogleMapApi.then(function(maps) {
});
}
]);
app.js
app.config([
'$stateProvider',
'$urlRouterProvider',
'uiGmapGoogleMapApiProvider',
function($stateProvider, $urlRouterProvider, uiGmapGoogleMapApiProvider) {
/**
* Configuring the Google Map API.
*/
uiGmapGoogleMapApiProvider.configure({
// key: 'your api key',
v: '3.17',
libraries: 'weather,geometry,visualization'
});
/*For any unmatched url, redirect to / */
$urlRouterProvider.otherwise("/");
/*For all the other states we would configure the $StateProvider*/
$stateProvider
.state('login', {
url: "/",
templateUrl: "/app/views/auth/login.html",
controller: 'AuthCtrl'
})
.state('maps', {
url: "/maps",
templateUrl: "/app/views/maps/maps.html"
})
.state('performance', {
url: "/performance/:ororizerID",
templateUrl: "/app/views/details/performance.html",
controller: "PerformanceCtrl"
})
.state('usage', {
url: "/usage/:ororizerID",
templateUrl: "/app/views/details/usage.html"
});
}
]);
maps.html
<ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
index.html
This content should be included in the index.html file
<script src="bower_components/angular-google-maps/dist/angular-google-maps.js"></script>
Please provide assistance with resolving this issue as the map is not loading at all.
The output displayed in the view is as follows:
<ui-gmap-google-map center="map.center" zoom="map.zoom" class="ng-scope ng-isolate-scope"><div class="angular-google-map"><div class="angular-google-map-container"></div><div ng-transclude="" style="display: none"></div></div></ui-gmap-google-map>
style.css
<style type="text/css">
.angular-google-map-container { height: 400px; width:800px;}
</style>