Durandal SPA Google Map API Map Centering

Question

Существует несколько сообщений, касающихся вопросов с правильной ориентацией карты api. Я понимаю следующее изменение размера карты:

google.maps.event.trigger(map, 'resize');

Я был в состоянии получить карту для правильного отображения в сНу элемента на первом экране страницы. Однако при навигации по html-странице, содержащей карту, в пределах div отображается только часть карты. Проблема, с которой я сталкиваюсь, заключается в том, как включить этот триггер изменения размера. Я новичок в спа-салона и Дюрандала, вот мой ViewModel отвечает за карту:

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

Конечно, вы хотели бы сделать это, когда карта видна, то есть она имеет высоту и ширину. Лучшим событием для этого является, как правило, событие завершения композиции. Итак:

var vm = { 
    title: 'Home View', 
    attached: initialize, 
    activate: function() { 
     toastr.success('Map View Activated'); 
    }, 
    compositionComplete: function() { 
     google.maps.event.trigger(map, 'resize'); 
    } 
}; 

Смотрите список и описание всех обратных вызовов здесь: Hooking Lifecycle Callbacks