2009
google maps, ebubbles, and links
we at boathouse like the google maps plugin ebubbles. it’s a great little plugin that allows us to create custom info bubbles for our custom map mashups.
the only problem we were having was that they’re created in such a way that any links created on the bubbles don’t work, because the whole bubble is controlled by a close function. according to the documentation,
In order to minimise strange click-through behaviour, by default the EBubble closes when clicked.
this doesn’t cut it for us.
we needed a solution for this, and a little bit of engineering got us underway.
starting at line 59 in the ebubbles js code, we found this line:
GEvent.addDomListener(this.div1,"mousedown", function() {
if (!that.noCloseOnClick) that.hide();
GEvent.trigger(that,"click");
});
after a little bit of playing (firebug’s console api is easier than writing alerts), we were able to figure out that if we did a function(e), when we clicked the link the event target would end up being a url. so we could change our code to this:
GEvent.addDomListener(this.div1,"mousedown", function(e) {
var firstFour = e.target.toString().substring(0,4);
if(firstFour == "http") return;
if (!that.noCloseOnClick) that.hide();
GEvent.trigger(that,"click");
});
adding the
var firstFour = e.target.toString().substring(0,4);
if(firstFour == "http") return;
just makes sure that the link actually gets through as a link by checking to see if it’s a URL. if it is, we return out of the function without going into the bubble.hide() function.
and the good thing — relative path or no, the target will always return a full path, so the substring of the first 4 characters should always return “http”, unless you’re dealing with some other protocol (but then you can always rewrite the if/then statement to include whatever protocols you want it to).
NOTE: the mousedown functions grabs this before the click function. we don’t need to attach this same check on the click function, but you can always put it in there if it makes you feel safer.
