jQuery + google maps + Elevation

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

by kougiland

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="map1Div" data-bind="style:{width:'300px',height:'300px'},map:mapOne"></div>
<input data-bind="value: mapOne().lat" />
<input data-bind="value: mapOne().lng" />

<div id="map2Div" data-bind="style:{width:'600px',height:'300px'},map:mapTwo"></div>
<input data-bind="value: mapTwo().lat" />
<input data-bind="value: mapTwo().lng" />

JavaScript

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

function MyViewModel() {
    var self = this;
    self.mapOne = ko.observable({
        lat: ko.observable(12.24),
        lng:ko.observable(24.54)
    });

    self.mapTwo = ko.observable({
        lat: ko.observable(40.76),
        lng:ko.observable(-73.98)
    });
}

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: 6, 
                                  mapTypeId: google.maps.MapTypeId.ROADMAP};
                
                mapObj.googleMap = new google.maps.Map(element, mapOptions);
                
                mapObj.marker = new google.maps.Marker({
                    map: mapObj.googleMap,
                    position: latLng,
                    title: "You Are Here",
                    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.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);  
                
          ...