角度のGoogleマップが表示されない

Question

先週、私は単純なプロジェクトのためにGoogleのJavaScript Maps APIを実装してきました。これまではオートコンプリートサービスとPlacesServiceを問題なく使用してきました。インタラクティブマップを追加するときに、マップの非同期性のためにマップが常にロードされないという問題が発生しました。私はその後、angular-google-mapsプラグインを使用するように移行しました。私はすでにAutocompleteとPlacesServiceのためにそれをロードしているので、ライブラリを2回ロードするのが冗長だと思うのでSDKローダーを使用していません。私は非常に基本的な例に従っていますが、マップは表示されません。私がチェックした一般的なエラー：

• html、body、およびmap div aの高さ。
• 角度モジュールと二重チェックAPIキーを使用する前にライブラリがロードされていることを確認しました
• 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

恐ろしいです。これを投稿し、犯人コードだけを投稿することで、私はPlacesServiceのコンテナとしてangular-google-mapsモジュールと同じ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("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>