googlearchive/js-marker-clusterer

InfoWindow compiled content rendered as [object HTMLDivElement]

ConnorMWGraham opened this issue · 1 comments

I am trying to use an agular ng-click within my info window. To accomplish this I need to first compile the info window's html:

//compile content
var compiled = $compile(windowContent)($scope);
//associate info window with marker
marker.info = new google.maps.InfoWindow({
      content : compiled[0],
});
//open info window on marker click
marker.addListener('click', function(event) {
                    var infoWindow = this.info;
                    infoWindow.open(map, this);
});
//add marker to MarkerClusterer
mc.addMarker(marker);

With this approach when my markers become clustered, their content shows up as [object HTMLDivElement]
image

When the markers are not clustered, they display the content correctly since a google maps info window accepts a Node as its content
image

Is there an easy patch to the library that would allow it to support a Node as its content type instead of an html string?

Well I feel dumb. My code had a custom handler of the 'clusterclick' event that builds an aggregated infowindow. I thought the infowindow was something the libaray handled.

google.maps.event.addListener(mc, "clusterclick", function(cluster, event) {
        var i = 0;
        var content = "";
        for (i; i < cluster.markers_.length; i++) {
            var marker = cluster.markers_[i];
            content += "<br>" + marker.info.content + "<br>";
        }
        var infoWindow = new google.maps.InfoWindow({
            content : content,
            position : cluster.getCenter()
        });
        infoWindow.open(map);
    });

Needed to be changed to

google.maps.event.addListener(mc, "clusterclick", function(cluster, event) {
        var i = 0;
        var content = "<div>";
        for (i; i < cluster.markers_.length; i++) {
            var marker = cluster.markers_[i];
            content += "<br>" + marker.info.content.outerHTML + "<br>";
        }
        content += "</div>";
        var compiled = $compile(content)($scope);
        var infoWindow = new google.maps.InfoWindow({
            content : compiled[0],
            position : cluster.getCenter()
        });
        infoWindow.open(map);
    });