styling icons markers - fusion tables

This is offered as assistance to other newbies like myself.

I struggled quite a while to figure out how to assign different icons to different categories of markers in my fusion table project. I found the documentation limited and confusing, and I figure if I was confused then others probably are as well.

With the help of others and lots of testing, I can now share with you two ways to accomplish this.

First note, the icons available for fusions tables is very limited, from a single set that you can see here: http://www.google.com/fusiontables/DataSource?dsrcid=308519
Magnify the icons floating on the ocean and click on the ones you like to learn their names.

1. Styling from inside the fusion table:
Create a column with a name like "Styles". Be sure to set its TYPE as TEXT.
In the column, add the names of the icons you want to use for your different categories.
Examples of names: star, target and "red_blank".
When you are in map view, click on the CONFIGURE STYLES BUTTON. Under Points/Marker Icon, select Column. Click on "Use icon specified in a column", and from the dropdown, select the column name you have set eg. "Styles".
View the map and you should see your various icons displayed.

2. Styling in your javascript:
Add a styles section to your code. Here's an example (in this case the Styles categories were coded with numbers):

layer_2 = new google.maps.FusionTablesLayer({
  suppressInfoWindows:true,
  query: {
    select: 'Location',
    from: 'tableid' //add the id number of your table here, inside the quotes
  },

styles: [
  {where: "'style' = 14", markerOptions:{ iconName:"star"}}, // other landmarks
  {where: "'style' = 13", markerOptions:{ iconName:"wht_pushpin"}}, //businesses
  {where: "'style' = 11", markerOptions:{iconName:"red_blank"}}, //town houses
  {where: "'style' = 12", markerOptions:{ iconName:"orange_blank"}}, //country homes
  {where: "'style' = 15", markerOptions:{ iconName:"target"}},
  ]});

Both approaches work great. Having worked with both I now think I prefer to do this inside the fusion table, just because I find the simpler I can keep the javascript, the better things work for me.

However, controlling it through the JS makes it easier to change icons on the fly, as you need only change one line of code, instead of changing the icon name in the Style column through every row of your table.

I hope this is helpful.
Wendy

回答1:

Also worth checking out this help article that describes how to use the Merge function to quickly create the column assigning styles / icons to rows in your table:

Using Merge to apply map styles by category

回答2:

For custom markers use this instead of FusionTablesLayer, http://code.google.com/p/gmaps-samples/source/browse/trunk/fusiontables/custom_markers.html?spec=svn2515&r=2515, I think they can be use with makerclusters.

回答3:

Also note that, for reasons unclear, you can get different results in the classic and current fusion table interface. My fusiontablelayer wasn't showing the right styles on my map even though all appeared well on the fusion table visualization, but when I switched to classic and reset the icon column and fixed the infowindow styling, everything fell into place. Odd, but it worked.