Angular-google-maps 未显示答案

【问题标题】：Angular-google-maps not showingAngular-google-maps 未显示
【发布时间】：2016-04-15 18:59:30
【问题描述】：

过去一周，我一直在为一个简单的项目实施 Google 的 JavaScript Maps API。到目前为止，我一直在使用 Autocomplete 服务和 PlacesService 没有问题。添加交互式地图时，由于地图的异步性质，我一直无法加载地图。我已经转移到使用 angular-google-maps 插件。我没有使用 SDK 加载器，因为我觉得加载库两次是多余的，因为我已经为 Autocomplete 和 PlacesService 加载了它。我遵循了非常基本的示例，但地图不会显示。我检查过的常见错误：

为 html、body 和 map div 指定高度。
确保在使用 Angular 模块和仔细检查 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;
}

【问题讨论】：

标签： javascript angularjs google-maps google-maps-api-3 angular-google-maps

【解决方案1】：

太棒了。通过发布此内容并仅发布罪魁祸首代码，我注意到我使用与 angular-google-maps 模块相同的 div 作为我的 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>

【讨论】：