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!
