Угловые-google-карты, не показывающие

Question

На прошлой неделе я реализовал API Google Maps Maps для простого проекта. До сих пор я без проблем пользовался услугами Autocomplete и PlacesService. При добавлении интерактивной карты у меня возникали проблемы с тем, что карта не загружалась все время из-за асинхронного характера. С тех пор я перешел на использование плагина с угловыми Google-картами. Я не использую загрузчик SDK, поскольку я чувствую, что избыточно загружать библиотеку дважды, так как я уже загрузил ее для Autocomplete и PlacesService. Я пошел по самому основному примеру, но карта просто не появится. Общие ошибки, которые я проверил:

• Дал html, тело и карту div высотой.
• Убедитесь, что библиотека загружалась до использования углового модуля и ключа с двойным проверкой.
• То же самое происходит при использовании загрузчика SDK, поэтому я уверен, что это не вызывает его. Autocomplete и PlacesService работают так, что библиотека работает в этом случае.

HTML:

<div class="col-xs-12 col-md-6"> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <div id="map" class="well"> 
       <ui-gmap-google-map center="map.center" 
            zoom="map.zoom" 
            pan="true" 
       > 
       </ui-gmap-google-map> 
      </div> 
     </div> 
    </div> 
</div> 

Контроллер:

angular.module("app").controller("IndexCtrl", ["$scope", "$interval", "uiGmapGoogleMapApi", function($scope, $interval, uiGmapGoogleMapApi) { 

    var Autocomplete; 
    var PlacesService; 

    $(document).ready(function() { 
     Autocomplete = new google.maps.places.Autocomplete(document.getElementById("placeInput"), {}); 
     PlacesService = new google.maps.places.PlacesService(document.getElementById("map")); 
    }); 

    uiGmapGoogleMapApi.then(function(maps) { 
     $scope.map = { center: { latitude: 0, longitude: 0 }, zoom: 2 }; 
     $scope.googleVersion = maps.version; 
     maps.visualRefresh = true; 

    }); 

}]); 

CSS:

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

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

Answer 1

Высокий. Публикуя это и публикуя только код преступника, я заметил, что я использую тот же div, что и модуль угловых google-maps, как контейнер для моего PlacesService. Изменяя это, карта выглядела отлично.

Новый контроллер:

angular.module("app").controller("IndexCtrl", ["$scope", "$interval", "uiGmapGoogleMapApi", function($scope, $interval, uiGmapGoogleMapApi) { 

    var Autocomplete; 
    var PlacesService; 

    $(document).ready(function() { 
     Autocomplete = new google.maps.places.Autocomplete(document.getElementById("placeInput"), {}); 
     PlacesService = new google.maps.places.PlacesService(document.getElementById("placesContainer")); 
    }); 

    uiGmapGoogleMapApi.then(function(maps) { 
     $scope.map = { center: { latitude: 0, longitude: 0 }, zoom: 2 }; 
     $scope.googleVersion = maps.version; 
     maps.visualRefresh = true; 

    }); 

}]); 

Новый HTML:

<div class="col-xs-12 col-md-6"> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <div id="map"></div> 
      <div class="well"> 
       <ui-gmap-google-map center="map.center" 
            zoom="map.zoom" 
            pan="true" 
       > 
       </ui-gmap-google-map> 
      </div> 
     </div> 
    </div> 
</div>