ReferenceError: Google не определяется с помощью нг-карта Geocoder службы

Question

Я получаю следующее сообщение об ошибке пытаюсь использовать сервис геокодера для ng-map library:

angular.js:13642 ReferenceError: google is not defined at Object.t [as geocode] (http://localhost:6240/Scripts/ng-map.min.js:25:28246)

Я инъекционная службу в мой контроллер

appModule.controller('MyController', ['$scope', 'NgMap', 'NavigatorGeolocation', 'GeoCoder', 
    function ($scope, NgMap, NavigatorGeolocation, GeoCoder) { 
     GeoCoder.geocode({address: 'Avenida Calle 26 # 40-40, Bogotá'}).then(function (result) { 
      //... do something with result 
      console.log('RESULT GEOCODER: ', result); 
     }); 
    }]); 

я тестировал с функцией NgMap получать ту же самую эталонную ошибку

NgMap.getGeoLocation('Avenida Calle 26 # 40-40, Bogotá').then(function (result) { 
    console.log('GETGEOLOCATION: ', result); 
}, function (error) { 
    console.log('Error getting geolocation: ', error); 
}); 

Как показано в фрагменте, я успешно использовал другие службы NgMap и NavigatorGeolocation.

Вот код моей страницы

<div map-lazy-load="https://maps.google.com/maps/api/js" map-lazy-load-params="{{ $ctrl.googleMapsUrl }}"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <ng-map id="map" 
       center="{{ $ctrl.mapCenter }}" 
       street-view="{{ $ctrl.svp }}"></ng-map> 
     </div> 
     <div class="col-md-6"> 
      <ng-map id="sv" /> 
     </div> 
    </div> 
</div> 

И в соответствующем контроллере/компонентной

$ctrl.googleMapsUrl = "https://maps.googleapis.com/maps/api/js?key=MY-API-KEY"; 
$ctrl.mapCenter = 'current-location'; 

NavigatorGeolocation.getCurrentPosition({ timeout: 10000 }).then(function (ll) { 
    $ctrl.svp = "StreetViewPanorama(document.querySelector('ng-map#sv'), {position:new google.maps.LatLng(" + ll.coords.latitude + " , " + ll.coords.longitude + ")})"; 
}, function (error) { 
    console.log('error getCurrentPosition: ', error); 
}); 

Я использую AngularJS v1.5.6

Заранее спасибо за вашу помощь ,

Answer 1

GeoCoder сервис использует google.maps.Geocoder class, который, в свою очередь, является частью API Карт Google. Момент, когда метод GeoCoder.geocode вызывается в контроллере Библиотека Google Maps еще не загружена (в вашем случае она загружается асинхронно через директиву map-lazy-load), вот почему эта ошибка возникает.

Вы можете использовать NgMap.getMap функцию, чтобы гарантировать Google Maps API готов:

NgMap.getMap("map").then(function() { 

     GeoCoder.geocode({ address: 'Avenida Calle 26 # 40-40, Bogotá' }) 
     .then(function (result) { 
      //... 
     }); 

}); 

Demo

angular.module('mapApp', ['ngMap']) 
 
    .controller('mapCtrl', ['$scope', 'NgMap', 'NavigatorGeolocation', 'GeoCoder', 
 
     function ($scope, NgMap, NavigatorGeolocation, GeoCoder) { 
 
      vm = this; 
 

 
      NgMap.getMap("map").then(function() { 
 

 
       GeoCoder.geocode({ address: 'Avenida Calle 26 # 40-40, Bogotá' }) 
 
        .then(function (result) { 
 
         vm.mapCenter = result[0].geometry.location; 
 
        }); 
 

 
      }); 
 

 

 
      vm.googleMapsUrl = "https://maps.googleapis.com/maps/api/js"; 
 
      vm.mapCenter = null; 
 

 

 
     }]);

<script src="https://code.angularjs.org/1.5.6/angular.js"></script> 
 
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> 
 
<div ng-app="mapApp" ng-controller="mapCtrl as vm"> 
 

 
\t \t <div map-lazy-load="https://maps.google.com/maps/api/js" map-lazy-load-params="{{ vm.googleMapsUrl }}"> 
 
\t \t \t <ng-map id="map" center="{{ vm.mapCenter }}"></ng-map> 
 
\t \t </div> 
 

 
</div>