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: 217

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

Related posts about JavaScript

Related posts about google-maps