Google Maps Knockout Binding Handler Multipoint

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 class="map" data-bind="googlemap: { locations: locations, centerLat: 6.167, centerLon: 10.667 }"></div>

CSS

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

JavaScript

ko.bindingHandlers.googlemap = {
    init: function (element, valueAccessor) {
        var
          value = valueAccessor(),
          mapOptions = {
            zoom: 10,
            center: new google.maps.LatLng(value.centerLat, value.centerLon),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoomControl: true,
            mapTypeControl: false,
            scaleControl: true, 
            streetViewControl: true, 
            overviewMapControl: false
            },
          map = new google.maps.Map(element, mapOptions);
          
        for (var l in value.locations())
        {
            var latLng = new google.maps.LatLng(
                            value.locations()[l].latitude, 
                            value.locations()[l].longitude);
            var marker = new google.maps.Marker({
                position: latLng,
                map: map,
                draggable: true,
                animation: google.maps.Animation.DROP
              });
        }
    }
};


var vm =  {
    locations: ko.observableArray([])
}
vm.locations.push({name: "Bansoa", latitude: 6.167, longitude: 10.667});    
ko.applyBindings(vm);