InfoWindow compiled content rendered as [object HTMLDivElement]
ConnorMWGraham opened this issue · 1 comments
ConnorMWGraham commented
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]
When the markers are not clustered, they display the content correctly since a google maps info window accepts a Node as its content
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?
ConnorMWGraham commented
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);
});