observerable with Google Map Marker - map and table connection

Binding a Grid and a Google Map to Knockout.js

by Jorgelig

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<pre>
    Seleeciona un marker o una fila de la tabla
</pre>
<div class="content">
    <div id="map"></div>
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>lat</th>
            <th>lng</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: points">
        <!-- , mouseleave: unhovered -->
        <tr data-bind="event: { click: toggle }, attr: { 'id': 'row-id-' + name }, css: { 'row-highligth': isSelected() }" class="">
            <td data-bind="text: name"></td>
            <td data-bind="text: lat"></td>
            <td data-bind="text: long"></td>
        </tr>
    </tbody>
</table>
</div>

CSS

pre{
    margin: 15px 0;
    font-size: 1.2em;
}
#map {
    width: 400px;
    height: 300px;
}
.content{
    padding: 0 15px;
}
.row-highligth {
    background: yellow;
}
table {
    border-collapse:collapse;
    margin-top: 15px;
}
table, td, th {
    border:1px solid black;
}
td, th {
    min-width: 150px;
}
td:hover{
    cursor: pointer;
}

JavaScript

var Marker = function (name, lat, long, parent) {
    var self = this;

    self.name = name;
    self.lat = ko.observable(lat);
    self.long = ko.observable(long);
    self.isDraggable = ko.observable(false);
    self.isSelected = ko.observable(false);
    self.isSelected.subscribe(function(value){
        if(value){
            self.marker_point.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
        }else{
            self.marker_point.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png');
        }
        self.marker_point.map.setCenter(self.marker_point.position);
    });

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, long),
        title: name,
        map: map,
        draggable: this.isDraggable()
    });

    self.marker_point = marker;

    self.toggle = function(data, event){
        if(parent.selectedPoint){
            parent.selectedPoint.isSelected(false);
        }
        parent.selectedPoint = self;
        self.isSelected(!self.isSelected());
    };
    
    self.clicked = function (data, event) {
        var $tr = $(event.target).parent();
        var $tbody = $tr.parent();
        $tbody.find('tr').removeClass('row-highligth');
        $tr.addClass('row-highligth');
        self.marker_point.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
        self.marker_point.map.setCenter(self.marker_point.position);
    };

    self.unhovered = function (data, event) {
        var $tr = $(event.target).parent();
        $tr.removeClass('hover');
        this.marker_point.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png');
    };

    google.maps.event.addListener(marker, 'click', function () {
        self.toggle();
    }.bind(self));

    google.maps.event.addListener(marker, 'mouseover', function () {}.bind(self));

    /*
    google.maps.event.addListener(marker, 'drag', function() {
        var pos = marker.getPosition();
       ...