knockout.js - Knouckout js connection with google map -

i new here. on project trying create list makes markers on map effect using knockout.

i have created map markers on based on data array. using viewmodel , knockoutjs create observable array , on left sidebar list titles observable array. trying connect titles left sidebar marker , make them bounce when title of list , title of marker equal. trying loop, since when use click ko.js object clicked. stuck here:

this.setloc = function(clickedloc){     for(var = 0; < self.loclist.length; i++){         if(clickedloc.title == markers[i].title){             markers[i].setanimation(google.maps.animation.bounce);          } else {             console.log("hi");         }     } }; 

my github project https://github.com/aimpotis/map_project

i new developer, new guy please , please use simple terms since don't have of experience.

i think need unwrap observables. pulled down code , got working. here changed function.

 this.setloc = function (clickedloc) {         var unwrappedloc = ko.tojs(clickedloc);         var unwrappedloclist = ko.tojs(self.loclist);         (var = 0; < unwrappedloclist.length; i++) {             if (unwrappedloc.title == markers[i].title) {                 markers[i].setanimation(google.maps.animation.bounce);             }         }     }; 

here whole thing. javascript (app2.js)

   var map;  var markers = []; var locations = [           { title: 'white tower', location: { lat: 40.626446, lng: 22.948426 } },           { title: 'museum of photography', location: { lat: 40.632874, lng: 22.935479 } },           { title: 'teloglion fine arts foundation', location: { lat: 40.632854, lng: 22.941567 } },           { title: 'war museum of thessaloniki', location: { lat: 40.624308, lng: 22.95953 } },           { title: 'jewish museum of thessaloniki', location: { lat: 40.635132, lng: 22.939538 } } ];  function initmap() {     map = new google.maps.map(document.getelementbyid('map'), {         center: { lat: 40.6401, lng: 22.9444 },         zoom: 14     });     (var = 0; < locations.length; i++) {         // position location array.         var position = locations[i].location;         var title = locations[i].title;         // create marker per location, , put markers array.         var marker = new google.maps.marker({             position: position,             title: title,             map: map,             animation: google.maps.animation.drop,             id:         });         markers.push(marker);     };      var loc = function (data) {         this.title = ko.observable(data.title);         this.location = ko.observable(data.location);     };      var place = function (data) {         this.name = ko.observable(data.name);     };      var stringstartswith = function (string, startswith) {         string = string || "";         if (startswith.length > string.length)             return false;         return string.substring(0, startswith.length) === startswith;     };      var viewmodel = function () {         var self = this;         this.query = ko.observable('');         this.loclist = ko.observablearray('');         this.filteredloclist = ko.computed(function () {             var filter = self.query().tolowercase();             console.log(filter);             var unwrappedloclist = ko.tojs(self.loclist);             if (!filter) {                 return unwrappedloclist             } else {                 return ko.utils.arrayfilter(unwrappedloclist, function (item) {                     return stringstartswith(item.title.tolowercase(), filter);                 });             }         }, this);              this.setloc = function (clickedloc) {                 var unwrappedloc = ko.tojs(clickedloc);                 var unwrappedloclist = ko.tojs(self.loclist);                 (var = 0; < unwrappedloclist.length; i++) {                     if (unwrappedloc.title == markers[i].title) {                         markers[i].setanimation(google.maps.animation.bounce);                     }                 }             };      };     var vm = new viewmodel();     ko.applybindings(vm);    locations.foreach(function (locitem) {         vm.loclist.push(new loc(locitem))     }); }; 

and here html (project.html)

  <!doctype html> <html lang="en"> <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="x-ua-compatible" content="ie=edge">     <title>tha gamiso ton map</title>     <style>         html, body {             width: 100%;             height: 100%;         }          .container {             width: 100%;             height: 100%;             display: flex;         }          .sidebar {             width: 20%;         }          #map {             width: 80%;         }     </style> </head> <body>     <div class="container">         <div class="sidebar">             <div>                 <input placeholder="search…" type="search" data-bind="textinput: query" autocomplete="off">                 <ul data-bind="foreach: filteredloclist">                     <li data-bind="text: title, click: $parent.setloc"></li>                 </ul>             </div>          </div>         <div id="map">          </div>     </div>     <script src="https://maps.googleapis.com/maps/api/js?key=aizasybhbhcpy58vpkkqx96p2jxfqxl12a-dkzg&callback=initmap"             async defer></script>     <script src="knockout-3.4.2.js"></script>     <script src="app2.js"></script>  </body> </html>