Google maps and knockoutjs

Question

I am making a single page app where in the second view I need to display the Google map. I am using the Google maps API where the map object is to be created.

Answer 1

I have modified "schmidlop" binding to reset marker on change in inputs (lat long inputs) and marker always in center of map.

Html

Binding , Include this in some js file and include it in html.

ko.bindingHandlers.map = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            $("#" + element.getAttribute("id")).data("mapObj","");
            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: 12, 
                              mapTypeId: google.maps.MapTypeId.ROADMAP};

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

            mapObj.marker = new google.maps.Marker({
                map: mapObj.googleMap,
                position: latLng,
               draggable: true
            });     

            mapObj.onChangedCoord = function(newValue) {
                var latLng = new google.maps.LatLng(
                    ko.utils.unwrapObservable(mapObj.lat),
                    ko.utils.unwrapObservable(mapObj.lng));

                mapObj.googleMap.setCenter(latLng);
                mapObj.marker.setPosition(latLng);                 
            };

            mapObj.onMarkerMoved = function(dragEnd) {
                var latLng = mapObj.marker.getPosition();
                mapObj.lat(latLng.lat());
                mapObj.lng(latLng.lng());
            };

            mapObj.lat.subscribe(mapObj.onChangedCoord);
            mapObj.lng.subscribe(mapObj.onChangedCoord);  

            google.maps.event.addListener(mapObj.marker, 'dragend', mapObj.onMarkerMoved);

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

View Model

self.mapOne = ko.observable();    


self.mapOne({'lat':ko.observable(87.22),'lng':ko.observable(27.22)});