Google Maps open infowindow does not work

Question

In my init map function I create Click listeneres for every marker

    google.maps.event.addListener(marker, 'click', function() {
        createInfoWindow(marker);
    });

Then I create the infowindows which works fine, if you click a marker:

function createInfoWindow(marker) {
    var infowindow = new google.maps.InfoWindow({
        maxWidth: 300,
        name: ''
    });
    infowindow.setContent(marker.name);
    infowindow.open(map, marker);
    map.panTo(marker.getPosition());
}

But when I call the same method on a click on a knockout foreach loop, the map only pans to the marker, but does not open the infowindow:

<ul class="object-list" data-bind="foreach: list.Objects">
    <li class="object-list-item">
        <a href="#" data-bind="text: name, click: getMarkerInfo"></b></a>
    </li>                    
</ul>


self.getMarkerInfo = function() {
    var mark = markers.find(function(o) {
            return o.name === obj.name;
        })
    createInfoWindow(mark);
};

So the marker is parsed correctly (otherwise the pan would not work) but I am really stuck here with the infowindow.

have you tried using <a href="#" data-bind="text: name, click: $root.getMarkerInfo"></b></a> ? or is it that every object inside of the list.Objects array has a function getMarkerInfo ? Take a look knockoutjs.com/documentation/binding-context.html — gkb
Well the getMarkerInfo is a function within my viewmodel. using $root does not work. — Stef

Stef Stef · Accepted Answer · 2016-12-10T09:07:29

Ok so apparantly my init map function ran twice and I had duplicates in my markers array. Going forward I will check for duplicates but here is a piece of code that workes with duplicates:

self.getMarkerInfo = function(obj) {
        var mark = markers.filter(function(o) {
                return o.name === obj.name;
            })
        mark = mark[1]
        createInfoWindow(mark);
    };

Google Maps open infowindow does not work

1 Answers