I hope someone can help with what is probably a fairly simple query. I have seen a question on here about trying to do this without a mouseclick, but I want to add an event listener to the markers on the Fusion Table map that will load the infoWindow content in a separate div below the map. So far I have suppressed the infoWindow, but I'm a bit lost on the next step of adding the click, retrieving the data relevant to that marker and loading into the div.
The marker display is limited to markers within a set radius of the user's location, in order to reduce load time.
I'm assuming I need to start with something like this:
google.maps.event.addListener(layer, 'click', function() {
I'd be grateful for any clues.
Here's the relevant bit of my code so far:
var tableid = '[ID]';
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'Location',
from: tableid,
where: 'ST_INTERSECTS(Location, CIRCLE(LATLNG'+marker.position+', 2000))'
},
options: {
suppressInfoWindows: true
}
});
var circle = new google.maps.Circle({
map: map,
radius: 2000,
fillOpacity: 0.1,
strokeOpacity: 0,
clickable: false
});
circle.bindTo('center', marker, 'position');
layer.setMap(map);
});
EDIT:
For everyone's amusement, this is what I've tried so far:
google.maps.event.addListener(layer, "click", function () {
$('#infoWindowDiv').append('new google.maps.infoWindowHtml');
});
It probably comes as a surprise ot no-one that it doesn't work. But hey, at least I'm trying! Thanks
EDIT 2:
I'm delighted to say I have found a solution that works - which I post here for anyone else who might have the same problem/goal:
google.maps.event.addListener(layer, "click", function (e) {
document.getElementById("infoWindowDiv").innerHTML = e.infoWindowHtml;
});