Google Maps and Knockouts

Question

I am making a one-page application where in the second view I need to display a Google map. I use the Google Maps API where the map object should be created.

var map = new google.maps.Map(mapId, { zoom: 5, center: new google.maps.LatLng(55, 11), mapTypeId: google.maps.MapTypeId.ROADMAP }); 

The mapId parameter gives me a problem. The view contains a div with id "mapId", but I can not get the identifier, and therefore the map cannot be displayed. I tried HTML binding, attribute binding, but it does not work. I am new to knockout. Please suggest some method

Answer 1

You should use custom binding, for example:

 ko.bindingHandlers.map = { init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 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: 5, mapTypeId: google.maps.MapTypeId.ROADMAP}; mapObj.googleMap = new google.maps.Map(element, mapOptions); } }; 

Your HTML will look like this:

 <div id="mapDiv" data-bind="style:{width:'300px',height:'300px'},map:myMap"></div> 

Finally, your view model:

 function MyViewModel() { var self = this; self.myMap = ko.observable({ lat: ko.observable(55), lng: ko.observable(11)}); } 

Here is a fiddle that is slightly larger than what you ask, but should work just fine for your case as well.

Answer 2

I changed the binding of "schmidlop" to the reset marker when changing inputs (long inputs) and the marker is always in the center of the map.

HTML

 <input data-bind="value: mapOne().lat" /> <input data-bind="value: mapOne().lng" /> 

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)}); 

Answer 3

Here is a good example of using Knockout JS and Google Maps. Hope this helps you on the right track. http://www.codeproject.com/Articles/387626/BikeInCity-2-KnockoutJS-JQuery-Google-Maps

Answer 4

Instead of mapId you want to use document.getElementById('map') , where 'map' is the div identifier containing the map ( <div id="map"></div> ). This jsFiddle should help.