Infowindows and Knockout

by SuperG4bry

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;amp;sensor=false"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<body>
  <div id="map" style="width: 500px; height: 500px;"></div>
</body>

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 id="info-title" data-bind="text: test">noTitle</div>';

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

  self.marker.addListener('click', function() {
  	ko.applyBindings(myModelView, $('#info-title')[0]);
    self.infowindow.open(map, self.marker);
  });

  // How should I handle the binding for all the items belonging to the class 'info-title' ?
  // This is also probably not the right place to put the following line of code

};

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);
var myModelView = new MyModel();

ko.applyBindings(myModelView);