Styling fusion table markers with custom url icons

Question

I want to style my fusion table markers based on a field in the fusion table. If I use default Google markers, the following code works:

        layer = new google.maps.FusionTablesLayer({
      query: {
        select: 'bizCity',
        from: '1yfyijoeC3GwDnnLutBI8IFOH8y2mfZ8LJGUDly4'
      },
    styles: [
  {where: "'bizCatSub' = 'Antique & Classic Motorcycle Dealers'", markerOptions:{ iconName:"star"}}, // other landmarks
  {where: "'bizCatSub' = 'Other moto business'", markerOptions:{ iconName:"wht_pushpin"}}, //businesses
  {where: "'bizCatSub' = 'Shop'", markerOptions:{iconName:"red_blank"}}, //town houses
  {where: "'bizCatSub' = '12'", markerOptions:{ iconName:"orange_blank"}}, //country homes
  {where: "'bizCatSub' = '15'", markerOptions:{ iconName:"target"}},
  ]  
    });
    layer.setMap(map);

You can see the jsfiddle here.

However, I want to use my own custom markers. To this end, I tried something like this:

        layer = new google.maps.FusionTablesLayer({
      query: {
        select: 'bizCity',
        from: '1yfyijoeC3GwDnnLutBI8IFOH8y2mfZ8LJGUDly4'
      },
    styles: [
  {where: "'bizCatSub' = 'Antique & Classic Motorcycle Dealers'", markerOptions:{ url: "http://pollster.net/test/icons/dealer.png" }}, 
  {where: "'bizCatSub' = 'Other moto business'", markerOptions:{ url: "http://pollster.net/test/icons/othermoto.png" }}, 
  {where: "'bizCatSub' = 'Shop'", markerOptions:{ url: "http://pollster.net/test/icons/shop.png" }}
  ]  
    });
    layer.setMap(map);

With the above code, the data shows up on the map, but it uses default markers instead of styling them as requested. Jsfiddle here. I looked at the documentation for styles and markeroptions and icons and tried different variations, but nothing is working for me. I think I'm missing something simple, but not sure what.

Anyone know what I'm missing?

Answer 1

Fusion Table Layer doesn't actually allow custom marker icons. This is a known issue: http://code.google.com/p/fusion-tables/issues/detail?id=69

However, there are some workarounds, probably the easiest of which was posted by a Google employee near the bottom of that thread just a few months ago: http://code.google.com/p/fusion-tables/issues/detail?id=69#c107

The gist of the workaround is that you'll no longer be using a FusionTableLayer, but instead be using javascript to grab the fusion table data and add custom markers yourself. It's a bit more code, but it does seem to work pretty well: https://googledrive.com/host/0B9htKoV1ZaKUU1g3ZnJCUWQyd28/customicons_viaApi.html

Answer 2

You cannot use your own custom icons with FusionTablesLayers, you can only use the ones that are defined by name (see here).

If you need to use your own and can take the performance hit of not using the FusionTablesLayer tile based rendering, you can query the table using either GViz or the Fusion Tables Query API to use Google Maps API v3 custom icons.

See this issue which has been marked "not-Feasible", but includes a work around.