Durandal Google Maps not showing properly
- by user1891037
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!
