Loading Fusion Tables InfoWindow data in a div out

2019-07-16 18:43发布

问题:

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;
});

回答1:

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;
        });