Google Maps Knockout Binding Handler

by kougiland

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>
<div data-bind="foreach: locations">
    <div data-bind="text: name"></div>
    <span data-bind="text: latitude"></span>
    <br/>
    <span data-bind="text: longitude"></span>
    <div class="map" data-bind="googlemap: { latitude: latitude, longitude: longitude }"></div>
</div>

CSS

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

JavaScript

ko.bindingHandlers.googlemap = {
    init: function (element, valueAccessor) {
        var
          value = valueAccessor(),
          latLng = new google.maps.LatLng(value.latitude, value.longitude),
          mapOptions = {
            zoom: 10,
            center: latLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            },
          map = new google.maps.Map(element, mapOptions),
          marker = new google.maps.Marker({
            position: latLng,
            map: map
          });
    }
};

var vm =  {
    locations: ko.observableArray([
        {name: "Cleveland", latitude:41.48 , longitude:-81.67},
        {name: "Chicago", latitude: 41.88, longitude: -87.63}
    ])
}
    
ko.applyBindings(vm);