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>

<script type="text/template" id="infoWindowTemplate">
    <div id="infoWindow">
        <div data-bind="html:html"></div>
        <button data-bind="click:switchContent">Switch content</button>
    </div>
</script>

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);
}
ContentModel.prototype.switchContent = function() {
    this.i(this.i()+1);
}


var contentModel = new 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: "someContent"
});
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()));
    gmaps.event.addListenerOnce(infoWindow,"domready",function() {
        console.log(document.getElementById("infoWindowTemplate").innerHTML);
        infoWindow.setContent(document.getElementById("infoWindowTemplate").innerHTML);
        ko.applyBindings(contentModel,document.getElementById("infoWindow"));
    });
    infoWindow.open(map,marker);
});