Durandal Google Maps not showing properly
        Posted  
        
            by 
                user1891037
            
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by user1891037
        
        
        
        Published on 2014-05-26T12:36:01Z
        Indexed on 
            2014/05/27
            3:28 UTC
        
        
        Read the original article
        Hit count: 272
        
Trying to show Google Maps using the Durandal. I'm now simply working with Durandal HTML Starter Kit so the other modules and all engine works properly. The thing is when I added the Google Map it doesn't fit the div size (the big part of div is just grey). As I understand, the problem is causing because Google Maps added before page is completely loaded. But I can't figure out how can I hook on page load event. Here is the module code:
define(['knockout', 'gmaps'], function (ko, gmaps) {
    return {
        displayName: 'Google Maps',
        myMap: ko.observable({
            lat: ko.observable(32),
            lng: ko.observable(10)}),
        activate: function () {
            console.log('activate');
            ko.bindingHandlers.map = {
                init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                    console.log('init');
                    var mapObj = ko.utils.unwrapObservable(valueAccessor());
                    var latLng = new gmaps.LatLng(
                        ko.utils.unwrapObservable(mapObj.lat),
                        ko.utils.unwrapObservable(mapObj.lng));
                    var mapOptions = { center: latLng,
                        zoom: 5,
                        mapTypeId: gmaps.MapTypeId.ROADMAP};
                    mapObj.googleMap = new gmaps.Map(element, mapOptions);
                }
            }
        },
        attached: function() {
            console.log('attached');
        },
        compositionComplete: function()
        {
            console.log('compositionComplete');
        }
    };
});
And a very simple HTML code:
<section>
    <div id="gmap-canvas" data-bind="map:myMap"></div>
</section>
I'm loading Google Maps with async plug-in in my shell.js. It works fine. Screenshot with trouble here - http://clip2net.com/s/ibswAa
P.S. div size is defined in .CSS file.
P.S. I tried to use getElementById approach provided here and it's work great if placed in compositionComplete block. But when I tried to move my bindings to this block nothing happens at all.
Thanks!
© Stack Overflow or respective owner