Multiple Fusion tables on one map
Hypothetically speaking, let's say you have two tables with information: one has county data and the other city data. And you want to display that data on just one map.
At the end of the initialize function we call a function "loadmap(); With this function, we will actually pull in our Fusion Tables layers. For this example we'll bring in two layers instead of one. Notice how strikingly similar the two are:
That's it! You now have one map pulling in two sets of data. To see the full code for this map, click here.
Rollover effects for Fusion Tables
One feature often requested in the Fusion Tables forums is to enable mouse rollover events for Fusion Table layers. Typically, readers who look at a map have to click on a point, polygon, etc. to open up new data about that point, polygon, etc. A mouseover event would allow new data to pop up if a reader hovers over a point, polygon, etc. with their mouse.
Another example is this map on poverty rates in Iowa. The code below is from this map and is very similar to the code on the documentation page:
Note: It's easiest to think of your Fusion Table as a list of polygons with certain values attached to it. For this poverty map, each row represents a Census Tract with values like Tract name, number of people within that tract that live in poverty, etc. And for this map, I made it so each polygon in the Fusion Table has its own, unique number in the "Number" column.
Here's a run through of what the above code does:
1. We've already declared "layer" as a particular Google Fusion Table layer (see the second box of code above). Now the "layer.enableMapTips" will allow us to add rollover effects to that Fusion Table layer. The "select" option represents all the columns in that Fusion Table layer that you want to use with the rollover effect.
For instance, here's the Fusion Table I'm calling in the above "enableMapTips" function. Notice how I've called all the columns with data ('Tract', 'County', etc.). I then told it which Fusion Table to look for with "from: 2415095." Each Fusion Table has its own unique number. The number for my poverty Fusion Table is 2415095, which is called. To find out what number your Fusion Table is, click File > About.
Finally, I've told it what column contains the geometry information for this Fusion Table (Again, go through this Poynter walkthrough to find out all you need to know about the geometry field). Mine is simply called "geometry." Each row in the "geometry" column represents one polygon.
2. The second step is the "google.maps.event.addListener(layer, 'mouseover', function(fEvent)." Basically this says "anytime the reader rollovers a polygon, the following will happen."
In this function, "fEvent"represents the polygon that the reader is currently hovering over. Let's say I'm rolling over the polygon that is represented by the first row in the Fusion Table. It's Census Tract 9601 and has the value of "1" in the "Number" column.
Every time a reader rolls over Census Tract 9601, the code "fEvent.row['Number'].value" goes into the Google Fusion Table, finds the Census Tract 9601 row and returns the value of the Number column, which is "1." So var "NumVal" would become "1" when a reader rolls over Census Tract 9601.
The next part changes that polygon's color. This happens with the "where" statement. This is saying, "when I rollover a polygon, find the polygon in the Fusion Table that represents 'NumVal' and change its color." Since the variable "NumVal" represents the polygon currently being hovered over, this is the polygon that changes colors. For a reader, the output is simple: I rollover a polygon. It changes colors.
In short: I roll over Census Tract 9601, firing of the "google.maps.event.addListener" function. This function finds the value of the "Number" column. It returns "1." The code then says change the color of the polygon that has a value of "1" in the "Number" column. This is Census Tract 9601, which I rolled over. It changes colors and life is good.
If you go back up to "layer.enableMapTips" in the third box of code, you'll notice there is an option for "suppressMapTips." For the poverty map, I have it set to true. But what if you set it to false? Basically, any time a reader hovers over a point or polygon, a small box shows up next to it containing information on that point or polygon. Notice the small yellow box that pops on this example page.
This is a nifty feature and a great replacement for the traditional InfoBox (the box that opens when you click on a point in a Google map). The only problem is the default text size is almost too small to read. How do we change that? Fairly easily:
2. Copy the file to the same folder your map is in and add this at the top of your document header:
I hope some of these tips help and if you have any questions, send me an e-mail. I'd be more than happy to help.