Google Map未加载-Angular JS

Question

I'm trying to make an application with Google Map, however, it seems I'm missing out something.

Here is my code:

<div class="container-fluid" ng-app="mapApp" ng-controller="mapCtrl">
  <div class="row">
    <div class="container-fluid">
      <div class="row header">
        <ui-gmap-google-map center='map.center' zoom='map.zoom'>{{map}}</ui-gmap-google-map>
      </div>
    </div>
  </div>
</div>

app.js:

'use strict';

// Declare app level module which depends on views, and components
angular.module('mapApp', [
  'ngRoute'
]).config(['locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
  $locationProvider.hashPrefix('!');

  $routeProvider.otherwise({redirectTo: '/view1'});
}]);
.config(function(uiGmapGoogleMapApiProvider) {
  uiGmapGoogleMapApiProvider.configure({
    key: 'key',
    v: '3.20', //defaults to latest 3.X anyhow
    libraries: 'weather,geometry,visualization'
  });
});

controller.js:

app.controller('mapCtrl', function($scope, uiGmapGoogleMapApi) {
    //make magic
    uiGmapGoogleMapApi.then(function(maps) {
        $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
    });
});

and I have added style:

.angular-google-map-container {
  height: 400px; }

The output doesn't seem to parse the expression well, so I only receive {{map}} .

I have lost entire day, trying to figure this one out.. it is probably something 'small' I have missed. Please note, that under 'key' there is a legit API key.

Please help, thanks.

Answer 1

Put the $scope.map outside the promise in controller. With the current set up you should get an eror - "angular-google-maps: a center or bounds property is required".

---

app.controller('mapCtrl', function($scope, uiGmapGoogleMapApi) {
  $scope.map = {center: { latitude: 45, longitude: -73 }, zoom: 8 };
});

A plunkr that works - here - provide a API KEY

Answer 2

You also need to declare a dependency on the uiGmapgoogle-maps module, so replace

angular.module('mapApp', [
  'ngRoute'
])

with

angular.module('mapApp', [
  'uiGmapgoogle-maps',
  'ngRoute'
])

There are a few typo issues in the provided example, once they are are fixed too, the map should be loaded as excepted

 'use strict'; angular.module('mapApp', [ 'uiGmapgoogle-maps', 'ngRoute' ]) .config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) { //$locationProvider.hashPrefix('!'); //$routeProvider.otherwise({ redirectTo: '/view1' }); }]) .config(function (uiGmapGoogleMapApiProvider) { uiGmapGoogleMapApiProvider.configure({ //key: '', v: '3.20', //defaults to latest 3.X anyhow libraries: 'weather,geometry,visualization' }); }) .controller('mapCtrl', function($scope, uiGmapGoogleMapApi) { uiGmapGoogleMapApi.then(function(maps) { $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 }; }); }); 

 .angular-google-map-container { height: 400px; } 

 <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.0.1/lodash.js" type="text/javascript"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular.js"></script> <script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script> <script src="http://rawgit.com/angular-ui/angular-google-maps/2.3.2/dist/angular-google-maps.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular-route.min.js"></script> <div class="container-fluid" ng-app="mapApp" ng-controller="mapCtrl"> <div class="row"> <div class="container-fluid"> <div class="row header"> <ui-gmap-google-map center='map.center' zoom='map.zoom'>{{map}}</ui-gmap-google-map> </div> </div> </div> </div>