Durandal SPA Google Map API Map Centering - google-maps

Question

There are a few posts regarding issues with google map api centering properly. I understand the following resizes the map:
google.maps.event.trigger(map, 'resize');
I was able to get the map to display properly within the div element on first page display. However, when navigating back to the html page that holds the map, only a fraction of the map displays within the div. The problem i'm having is figuring out how to incorporate this resize trigger. I'm new to SPA's and Durandal, here is my viewmodel responsible for the map:
define(['async!https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'], function () {
var vm = {
title: 'Home View',
attached: initialize,
activate: function () {
toastr.success('Map View Activated');
}
};
return vm;
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
});

Answer 1

Sure, you'd want to do this when the map is visible, i.e. it has a height and width. The best event for this is typically the composition complete event. So:
var vm = {
title: 'Home View',
attached: initialize,
activate: function () {
toastr.success('Map View Activated');
},
compositionComplete: function() {
google.maps.event.trigger(map, 'resize');
}
};
See the list and description of all callbacks here: Hooking Lifecycle Callbacks