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

添加了一些基础选项和哇啦！

   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}

    })