MVC4 Knockout Googlemap binding error - google-maps

Question

I'm trying to bind an address from my model to a marker on Google map.
The map should display the marker determined with the full address of the model. Beside the map, I would like to display the value for lat and lng of the marker. The user should be able to drag and drop the marker and the values of lat & lng should update. I use jsFiddle as start referenced from this website but I cannot quite get it to work.
I successfully created the map with a marker pointing to the address of the model. Unfortunately I'm get an error when adding knockout to bind it:
Uncaught Error: Unable to parse bindings.
Message: ReferenceError: lat is not defined;
Bindings value: value: lat
This is the view:
#model GoogleMapTest.Models.Restaurant
#{
ViewBag.Title = "Index";
}
<div id="panel">
<input id="address" value="">
<p data-bind="with: selectedPoint">
Name: <b>#Model.Name</b>
<br />
Lat: <span data-bind="text: lat"></span>
<br />
Long: <span data-bind="text: long"></span>
</p>
</div>
<div id="map-canvas"></div>
This is the script:
#section scripts {
<script type="text/javascript">
var geocoder;
var map;
var orignalLat;
var originalLong;
$(function () {
var stringAddress = '#Model.Address1' + ", " + '#Model.City' + ", " + '#Model.StateProv' + ", " + '#Model.Zip' + ", " + '#Model.Country';
$("#address").val(stringAddress);
geocoder = new google.maps.Geocoder();
var mapOptions = {
zoom: 16
}
google.maps.event.addDomListener(window, 'load', codeAddress(stringAddress));
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
});
function codeAddress(address) {
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
orignalLat = results[0].geometry.location.lat();
originalLong = results[0].geometry.location.lng();
map.setCenter(results[0].geometry.location);
viewModel.selectedPoint(new point('', orignalLat, originalLong));
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function point( name, lat, long) {
this.name = name;
this.lat = ko.observable(lat);
this.long = ko.observable(long);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
title: name,
map: map,
draggable: true
});
//if you need the position while dragging
google.maps.event.addListener(marker, 'drag', function () {
var pos = marker.getPosition();
this.lat(pos.lat());
this.long(pos.lng());
}.bind(this));
//if you just need to update it when the user is done dragging
google.maps.event.addListener(marker, 'dragend', function () {
var pos = marker.getPosition();
this.lat(pos.lat());
this.long(pos.lng());
}.bind(this));
}
var viewModel = {
selectedPoint: ko.observable(new point('', 10, 10))
};
ko.applyBindings(viewModel);
</script>
}
Any help or suggestions would be greatly appreciated.
Edited for working solution...

Answer 1

Your viewModel consists of an array of points, but your markup binds directly to lat and lng properties that don't exist on the root viewModel. So that's why you are getting the error, but how to fix it is more interesting.
I'm actually not sure what you are trying to do and the fix is different based on that. Do you want ONE marker that displays when the user selects a point? Or do you want every point to have a marker on the map right from the beginning?
If you want markers for ALL points, change your markup to bind to all of them:
<p data-bind="foreach: points">
Name: <b>#Model.Name</b>
<br />
Lat: <span data-bind="text: lat"></span>
<br />
Long: <span data-bind="text: long"></span>
</p>
OR... If you want just one marker, I would first add a "selectedPoint" to your viewModel
var viewModel = {
selectedPoint: new point('', 0, 0),
points: (removed)
};
Then in your markup, bind the lat and lng on the selected point
<p data-bind="with: selectedPoint">
Name: <b>#Model.Name</b>
<br />
Lat: <span data-bind="text: lat"></span>
<br />
Long: <span data-bind="text: long"></span>
</p>