jQuery + google maps + Elevation

playing with google maps v3 events, jQuery, icons from http://google-maps-icons.googlecode.com

by mcannon

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/knockout-latest.debug.js"></script>
<div id="myMap" data-bind="map:myMap" ></div>
<input data-bind="value: lat" />
<input data-bind="value: lng" />

CSS

#myMap{
    width: 300px;
    height: 300px;
}

JavaScript

$(document).ready(function () {
   
   ko.applyBindings(viewModel);
});

function MyViewModel() {
    
    var self = this;
    self.lat = ko.observable(5);
    self.lng = ko.observable(11);
    self.myMap = ko.observable();
    self.mapObj = null;
    
   /* points: ko.observableArray([
        new ko.mapPoint('Test1', 4, 11, self.myMap()),
        new ko.mapPoint('Test2', 5, 12, self.myMap()),
        new ko.mapPoint('Test3', 8, 13, self.myMap())])*/
}

ko.mapPoint = function(name, lat, long, mapObj) {
    var self = this;
    console.log(mapObj);
    this.name = name;
    
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat(), long()),
        title: name,
        map: mapObj,
        draggable: true
    });

    //Update Lat/Lng when user is done dragging
    google.maps.event.addListener(marker, 'dragend', function() {
        var pos = marker.getPosition();
        lat(pos.lat());
        long(pos.lng());
    }.bind(this));
}

ko.bindingHandlers.map = {
            
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    	       // viewModel.mapObj = ko.utils.unwrapObservable(valueAccessor());
    	        var latLng = new google.maps.LatLng(
    	            ko.utils.unwrapObservable(viewModel.lat),
    	            ko.utils.unwrapObservable(viewModel.lng));
    	        var mapOptions = { center: latLng,
    	                          zoom: 5, 
    	                          mapTypeId: google.maps.MapTypeId.ROADMAP};
        
    	        viewModel.mapObj = new google.maps.Map(element, mapOptions);
    	       
        p1 = new ko.mapPoint('Test1', viewModel.lat, viewModel.lng, viewModel.mapObj);
            
            },
    

        };

var viewModel = new MyViewModel();