angular-google-maps not rendering map, just the map controls

Question

My map is only partially loading the map controls but not rendering the actual map:

I have all of the proper dependencies loaded, using this as a guideline.

my 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>

I am using the recommended uiGmapGoogleMapApiProvider provider to guarantee that angular-google-maps does not begin processing any directives until all of the Google Maps SDK is fully ready:

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

config.$inject = ['uiGmapGoogleMapApiProvider'];

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

}

And My angular map model inside my controller:

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

Why is my map detail not showing up?

Thank you!

Answer 1

added some base options and 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}

    })