Search code examples
javascriptgoogle-maps-api-3dom-eventsgoogle-fusion-tables

Accessing individual cell value from Google Fusion Tables on Click event


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

Solution

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