angular-google-maps不渲染地图，只是地图控件

Question

我的地图仅部分加载地图控件但不渲染实际地图：

我使用this作为指导，加载了所有正确的依赖项。

我的HTML：

<div class="col-xs-3">
    <ui-gmap-google-map center="vm.map.center" zoom="vm.map.zoom">
        <ui-gmap-layer type="TrafficLayer" show="vm.map.showTraffic"></ui-gmap-layer>
    </ui-gmap-google-map>
</div>

我正在使用推荐的uiGmapGoogleMapApiProvider提供商，以确保在所有Google Maps SDK完全就绪之前，angular-google-maps不会开始处理任何指令：

angular.module('app', [
    'uiGmapgoogle-maps',
]).config(config)

config.$inject = ['uiGmapGoogleMapApiProvider'];

function config(uiGmapGoogleMapApiProvider) {
    uiGmapGoogleMapApiProvider.configure({
       v: '3.17',
       libraries: 'weather,geometry,visualizations'
})

}

我的控制器中的角度地图模型：

   uiGmapGoogleMapApi.then(function(maps) {
        console.log(maps, "MAPS");
        vm.map = {center: {latitude: 45, logitude: -73}, zoom:8, showTraffic: true,  show: true}
    })

为什么我的地图细节没有显示？

谢谢！

Answer 1

添加了一些基本选项和wa-lah！

   uiGmapGoogleMapApi.then(function(maps) {
        console.log(maps, "MAPS");
        var baseOptions = {
            'maxZoom': 15,
            'minZoom': 4,
            'backgroundColor': '#b0d1d4',
            'panControl': false,
            'zoomControl': true,
            'draggable': true,
            'zoomControlOptions': {
              'position': 'RIGHT_TOP',
              'style': 'SMALL'
            }
        };
        console.log("here")
        vm.map = {center: {latitude: 51.219053, longitude: 4.404418}, options:baseOptions, zoom:8, showTraffic: true,  show: true}

    })