4

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

2 Answers 2

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

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.

1
  • 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, 2012 at 20:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.