observerable with Google Map Marker

https://groups.google.com/forum/#!topic/knockoutjs/TNUXl8JXWHQhttps://groups.google.com/forum/?pli=1#!topic/knockoutjs/0Tny1JWlq-c

by kougiland

HTML

<script src="http://knockoutjs.com/downloads/jquery.tmpl.min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="map"></div> 
<div id="points" data-bind="template: { name: 'pointsTmpl', foreach: points }"></div>
<script id="pointsTmpl" type="text/html">
    <p>
        Name: <span data-bind="text: name"></span>; 
        Lat: <span data-bind="text: lat"></span>;
        Long: <span data-bind="text: long"></span>
    </p>
</script>

CSS

#map {
    width: 400px;
    height: 400px;
}

JavaScript

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 poition 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 map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: new google.maps.LatLng(55, 11),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var viewModel = {
    points: ko.observableArray([
        new point('Test1', 55, 11),
        new point('Test2', 56, 12),
        new point('Test3', 57, 13)])
};

ko.applyBindings(viewModel);