astrolope astrolope - 21 days ago 4
Javascript Question

Google Maps Marker Clusterer: Nested Click Handling

After hacking away with DOM and event propagation issues all day I've come to the last of issues i've been trying to deal with using the marker clusterer.

Currently I'm attaching a click handler to the DOM element to change a state for a single infobox using this code.

//google infobox plug in
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid #E0E0E0; margin-top: 8px; background: white; padding: 5px; border-radius: 7px;";
boxText.innerHTML = contentString;

//when infowindow is clicked, open view...
google.maps.event.addDomListener(boxText, 'click', (function (marker) {
return function () {
$state.go("comments", {
"shoutId": activeId
});
}
})(marker));


This works perfectly fine as expected for a single info box window. But when I call getMarkers on a cluster and do essentially the same thing the results are not the same.

In the getMarker function I'm using a for loop to iterate through the cluster and append an infobox with the looped content inside of it. I could apply the boxText event handler to the whole window but that wouldn't give me an event handler on each individual marker section..

This is the code i'm using inside of the marker cluster click event handler

google.maps.event.addListener(mc, 'click', function (cluster, $event) {

var content = '';
var clickedMarkers = cluster.getMarkers();
var splitterBar = "border-bottom";

for (var i = 0; i < clickedMarkers.length; i++) {
if (i === 0) {
var var_pos = clickedMarkers[i];
}


var clickedMarkersNames = clickedMarkers[i].title;

var innerText = document.createElement("div");

//Format the shout body
content += '<div id="content " class="' + splitterBar + '">' +
'<div id="bodyContent">' +

'<article id="shout' + i + '"class="">' +
'<p> ' +
clickedMarkers[i].title +
'</p>' +
'<a data-ui-sref="comments">' +
'<small class="grey">' + clickedMarkers[i].address + ' &#8226; ' +
moment.duration(Date.now() - clickedMarkers[i].time).humanize() + ' &#8226; ' +
clickedMarkers[i].decibels + ' dB &#8226; ' +
clickedMarkers[i].echoes + echoesPlural +
'</small>' +
'</a>' +
'</article>' +

'</div>' +
'</div>';

//when infowindow is clicked, open view...
google.maps.event.addDomListener(innerText, 'click', (function () {
return function () {
alert("click");
}
})());

}

var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid #E0E0E0; margin-top: 8px; background: white; padding: 0px; border-radius: 7px; max-height: 325px; overflow-y: auto;";
boxText.setAttribute("class", "animated fade");
boxText.innerHTML = content;

var myOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-135, -40),
zIndex: null,
boxStyle: {
background: "",
opacity: 1,
width: "280px"
},
closeBoxMargin: "13px 5px 5px 5px",
closeBoxURL: "",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
alignBottom: true,
pane: "floatPane",
enableEventPropagation: false
};

var ib1 = new InfoBox(myOptions);


if (previousInfowindow) {
previousInfowindow.close();
}
previousInfowindow = ib1;


ib1.open(map, var_pos);

});


edit: added the full marker click cluster
I feel like the attachment has to be done inside the for loop or else the scope wouldn't be correct.

I've done alot of reading on the sparse amount of info related to the clusterer already but I feel like it's a simple problem and I'd love to get some insight from someone else. Thanks for your help!

Answer

After a bit of hacking. I don't even know if it's possible to attach DomListeners in this way. To solve it. since I couldn't use any angular syntax inside of the html box for the infobox. For each marker cluster i made an A element for the content. styled it to block and then hid all the link elements to make it look like normal. I manually pointed the href to the view i was trying to navigate to and used the ID property I had saved to complete the route. It work's inside ionic but it's a rough hack. I wanted to post how I managed to get around it though for anyone else that may be looking.

Comments