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

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}
})