Knockout binding on Infowindow

by SuperG4bry

HTML

<body>
  <div id="map" style="width: 500px; height: 500px;"></div>
</body>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>

JavaScript

'use strict'

var map;

function mapPoi(title, lat, lng) {
  var self = this;

  self.title = ko.observable(title);

  self.marker = new google.maps.Marker({
    position: {
      lat: lat,
      lng: lng
    },
    map: map,
    animation: null,
    title: title
  });
  // First what kind of binding will help me display this poi title
  var infoTitle = '<div class="info-title" data-bind="text: ????">noTItle</div>';

  self.infowindow = new google.maps.InfoWindow({
    content: infoTitle
  });

  self.marker.addListener('click', function() {
    self.infowindow.open(map, self.marker);
  });
  
  // How should I handle the binding ?
  //ko.applyBinding(MyModel(), ??);

};

function MyModel() {
  var self = this;
  self.test = 'Title';
  self.poiMarkers = ko.observableArray([]);

  self.map = ko.observable({
    lat: ko.observable(34.046241),
    lng: ko.observable(-118.250656)
  });

  self.poiMarkers.push(new mapPoi('poi1', -34.397, 150.644));
  self.poiMarkers.push(new mapPoi('poi1', -34, 150.644));
};

var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
  zoom: 8,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);


ko.applyBindings(new MyModel());