Knouckout js connection with google map

Question

I am new here. I currently on a project trying to create a list that makes the markers on the map do an effect by using knockout.

I have created the map with markers on it based on the data from an array. Then by using a ViewModel and knockoutjs I create an observable array and on the left sidebar a list with the titles from that observable array. Now I am trying to connect the titles from the left sidebar to the marker and make them bounce when the title of the list and the title of the marker are equal. I am trying to do that with a loop, since when I use click with KO.js I get back the object that it was clicked. Basically I am stuck here:

this.setLoc = function(clickedLoc){
    for(var i = 0; i < self.locList.length; i++){
        if(clickedLoc.title == markers[i].title){
            markers[i].setAnimation(google.maps.Animation.BOUNCE);

        } else {
            console.log("hi");
        }
    }
};

My GitHub for this project is https://github.com/Aimpotis/map_project

I am a new developer, could you help a new guy please and please use simple terms since I don't have much of experience.

Answer 1

I think you need to unwrap your observables. I pulled down your code and got it working. here is the changed function.

 this.setLoc = function (clickedLoc) {
        var unwrappedLoc = ko.toJS(clickedLoc);
        var unwrappedLocList = ko.toJS(self.locList);
        for (var i = 0; i < unwrappedLocList.length; i++) {
            if (unwrappedLoc.title == markers[i].title) {
                markers[i].setAnimation(google.maps.Animation.BOUNCE);
            }
        }
    };

here is the whole thing. the 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
    });
    for (var i = 0; i < locations.length; i++) {
        // Get the position from the location array.
        var position = locations[i].location;
        var title = locations[i].title;
        // Create a marker per location, and put into markers array.
        var marker = new google.maps.Marker({
            position: position,
            title: title,
            map: map,
            animation: google.maps.Animation.DROP,
            id: i
        });
        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);
                for (var i = 0; i < 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 is your 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>