Google Maps не работает в директиве AngularJS

Question

Я являюсь создателем ng-map.

Я пытаюсь разработать директиву в AngularJS, чтобы показать Карты Google. Я могу показать карту, но я хочу сделать еще один шаг. Моя директива будет принимать координаты или адрес. В случае установки коордов он покажет маркер с ними. Однако, если координаты недоступны, тогда следует попытаться показать маркер с использованием адреса и геокода.

Моя проблема в том, что когда я пытаюсь запустить функцию геокодирования внутри директивы, этот запрос выглядит асинхронным, а остальная часть кода выполняется до получения ответа.

Как я могу заставить выполнить этот запрос?

Пожалуйста, смотрите мой plunker: http://plnkr.co/edit/QRj6jXQYxSRR3CseavQY?p=preview

<div class="span12"> 

    {{center}} 
    <label>Address</label> 
    <input type="text" ng-model="completeAddress" class="input-xxlarge input-height-large" placeholder="Type your business address...">  
    <map id="map_canvas" style="height: 452px; margin-bottom: 20px;"></map> 

    <button class="btn btn-primary btn-large pull-right" style="margin-bottom: inherit" ng-click="setBusinessLocation()">Save</button> 
</div> 

Вы можете заметить, есть маркер в одном городе (Хихон) (после того, как геокодирование), но карта создается прежде с центром в другом городе (Хетафе).

Thanks, Roberto.

Answer 1

Чтобы решить эту проблему,

1. Из директивы, передать map в контроллер для доступа к карте.
2. Создайте GeoCoder как услугу с помощью $ q и $ rootScope. $ Примените для async. обработка
3. Использование Geocoder от контроллера, и при необходимости с вашей картой директивы как форма GeoCoder(address).then(...) показать маркер, когда геокод поиск производится

Это часть службы.

app.service('GeoCoder', function($q, $rootScope) { 
    return { 
     getLocations : function(address) { 
     var deferred = $q.defer(); 
     var geocoder = new google.maps.Geocoder(); 
     console.log('address', address); 
     geocoder.geocode({'address': address }, function (results, status) { 
      $rootScope.$apply(function() { 
      if (status == google.maps.GeocoderStatus.OK) { 
       deferred.resolve(results); 
      } 
      }); 
     }); 
     return deferred.promise; 
     } 
    } 
}); 

и это функция, чтобы добавить маркер от адреса в контроллере

$scope.addMarkerFromAddress = function() { 
    GeoCoder.getLocations($scope.address).then(function(results) { 
     var latLng = results[0].geometry.location; 
     var marker = new google.maps.Marker({ 
     map: $scope.map, 
     position: latLng 
     }); 
     $scope.map.setCenter(latLng); 
    }); 
    }; 

И, наконец, это демо, http://plnkr.co/edit/9gkanMqVZCldZjYZ5oA2?p=preview