Accessing individual cell value from Google Fusion Tables on Click event

Question

I am using Google Fusion Tables to make a map to show the number of scholarly journal articles that have been published by people at my university regarding global health. Currently, a popup bubble appears when you click on a country/polygon, with the name of the country and the number of papers published about each country styled in the Fusion Table.

What I would like to have happen is to have the sidebar update with links to the respective article abstracts when a country is clicked. For example, when you click on France, 12 author names and article titles (with links) appear in the sidebar.

I am hoping there is a way to get the name of the country from the fusion table when a country is clicked. With the name of the country obtained, I am hoping to call a function to swap out the text in the sidebar and replace it with the proper information. I was hoping to store the functions in a separate javascript file, and call them from within the html file.

I have read over the reference information and have not been able to find how to store the cell value from a corresponding polygon that is clicked.

The Javascript file is just a mock-up right now, but ideally that is where the data will be stored for populating the sidebar.

Have I been clear about what I'm trying to achieve? I've tried to be clear and provide details.

As I am a new member, Stack Overflow only allows me to paste 2 links. Here is the map and the fusion table:

Map: https://mywebspace.wisc.edu/csterling/web/practice%202.html

Fusion Table: https://www.google.com/fusiontables/DataSource?snapid=S501306uxNU

The Javascript file I would like to reference will be filled with functions that look something like this:

function argentina() {
    document.getElementById("textDescription").innerHTML = "Articles Published: Curing diseases with indigenous knowledge by John So-and-so, etc";
};

score 3 · Accepted Answer · edited Jun 26 '12 at 12:01

3

Here is what I did to solve my problem, with many thanks to Chris K. for the help!

google.maps.event.addListener(layer,'click',function(e) {
    var countryName = e.row['SOVEREIGNT'].value;
    if (countryName == 'Argentina'){
        argentina();
    }
});

edited Jun 26 '12 at 12:01

Parvin Gasimzade

25,180
8
56
83

answered May 24 '12 at 19:59

csterling

704
3
7
18

score 1 · Answer 2 · answered May 17 '12 at 05:26

I see the wisc.edu url so I want to say hello from Madison...

You'll want to use a click event on your fusion table layer, which will query the table and write data to the page element.

Here are a couple different snippets that you could mimic to get the value of the cell in a row that was clicked. Each one will achieve basically the same thing.

//click listener on layer using jquery
google.maps.event.addListener(layer, 'click', function(e) {
    $("#dem-votes").html(
        '<p><strong>Percent:</strong> ' + e.row['Dem County Percent'].value +
        '<br><strong>Votes:</strong> ' + e.row['Dem County Votes'].value +
        '<br><strong>Vote Margin: </strong>' + e.row['Dem County Margin'].value + '</p>');
});


//click listener on layer using js
google.maps.event.addListener(layer, 'click', function(e) {
    document.getElementById('dem-votes').innerHTML =
        '<p><strong>Percent:</strong> ' + e.row['Dem County Percent'].value +
        '<br><strong>Votes:</strong> ' + e.row['Dem County Votes'].value +
        '<br><strong>Vote Margin: </strong>' + e.row['Dem County Margin'].value + '</p>';
});

The key is basically e.row['Dem County Percent'].value, which is the value for a given column -- in this case Dem County Percent -- in the clicked upon row.

I worked up your map using the last example. Seems to work...

Chris K.

Chris- thank you for the quick reply. For some reason, stack overflow did not notify me of your response, so I apologize for not checking back sooner. I have one follow-up question...could I store the e.row['Dem County Percent'].value as a variable? Such as: var columnValue = e.row['Dem County Percent'].value; — csterling, May 23 '12 at 20:08

Accessing individual cell value from Google Fusion Tables on Click event

2 Answers2