Google Maps Knockout Binding Handler

by darcon77

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<div class="map" data-bind="googlemap: { locations: locations, center: center, map:map }"></div>
<button type="button" data-bind="click: add">Add One</button>

CSS

.map { height:300px; width:300px; }

JavaScript

ko.bindingHandlers.googlemap = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var
          value = valueAccessor(),
          center = new google.maps.LatLng(value.center().latitude, value.center().longitude),
          mapOptions = {
            zoom: 10,
            center: center,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            };
          value.map(new google.maps.Map(element, mapOptions));
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext){
        var value = valueAccessor();
        $.each(value.locations(), function(k, v){
         var marker = new google.maps.Marker({
            position: new google.maps.LatLng(v.latitude, v.longitude),
            map: value.map()
          })
        });
    }
};

var vm = (function() {
    var base = this;
    base.map=ko.observable(null);
    base.locations = ko.observableArray([
        {name: "Cleveland", latitude:41.48 , longitude:-81.67},
        {name: "Chicago", latitude: 41.88, longitude: -87.63}
    ]);
    base.center = ko.observable({latitude: 41.48, longitude:-81.67});
    base.add=function(){
        base.locations.push({name: "Test", latitude:41.48 , longitude:-83.67})
    };
})();
    
ko.applyBindings(vm);