infoWindow binding & resize

by kasheftin

HTML

<script type"text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<div id="map"></div>

<div id="infoWindow">
    <div data-bind="html:html"></div>
    <button data-bind="click:switchContent">Switch content</button>
</div>

CSS

html,body,#map {
    border: 0;
    height: 100%;
    margin: 0;
    padding: 0;
}

JavaScript

var ContentModel = function() {
    this.htmls = ["lala","lala<br>lulu<br>lili"];
    this.i = ko.observable(0);
    this.html = ko.computed(function() {
        return this.htmls[this.i()%2];
    },this);
    this.html.subscribe(function() {
        this.onResizeRequired && this.onResizeRequired();
    },this);
}
ContentModel.prototype.switchContent = function() {
    this.i(this.i()+1);
}


var contentModel = new ContentModel();
ko.applyBindings(contentModel);

var gmaps = google.maps;

var map = new gmaps.Map(document.getElementById("map"));
map.setCenter(new gmaps.LatLng(48.740,19.140));
map.setZoom(13);

var infoWindow = new gmaps.InfoWindow({
    content: document.getElementById("infoWindow")
});
var marker = new gmaps.Marker({
    map: map
});

gmaps.event.addListener(map,"click",function(e) {
    marker.setPosition(new gmaps.LatLng(e.latLng.lat(),e.latLng.lng()));
    infoWindow.open(map,marker);
});