Loading google map binding too soon

Question

I tried using this code here: fiddle

But it keeps sending me a javascript error "Uncaught TypeError: Cannot read property 'x' of undefined".

I mostly think it because the element didn't have time to load before the init function was executed.

that's my view:

 <div id="mapDiv" data-bind="map:myMap"></div>

that's my binding:

ko.bindingHandlers.map = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var mapObj = ko.utils.unwrapObservable(valueAccessor());
        var latLng = new google.maps.LatLng(
            ko.utils.unwrapObservable(mapObj.lat),
            ko.utils.unwrapObservable(mapObj.lng));
        var mapOptions = { center: latLng,
                            zoom: 15};

        mapObj.googleMap = new google.maps.Map(element, mapOptions);

        mapObj.marker = new google.maps.Marker({
            map: mapObj.googleMap,
            position: latLng,
            title: "You Are Here",
        });

        $("#" + element.id).data("mapObj",mapObj);
    }

};

and that's my viewmodel:

module.activate = function(settings){
    var self = this;
    this.myMap = ko.observable({
        lat: 34.1,
        lng: 31.6});

    this.compositionComplete = function(child, parent, settings){
    };
};
return module;

});

This won't fix your main problem, but you don't need to pull the id of the element and jQuery-find it. You can just do `$(element).data("mapObj", mapObj)` — Roy J, Jun 22 '15 at 16:28

score 0 · Answer 1 · edited May 23 '17 at 11:43

I made a fiddle with your code, and once I styled the map div to have height and width, it ran without a problem.

<div id="mapDiv" style="width:300px; height:300px" data-bind="map:myMap"></div>

I never did see any reference to x, so I can't say I've addressed your issue, but if you think you have something running before Google Maps is ready, see this solution for adding a listener for the idle event.

Loading google map binding too soon

1 Answers1