Fusion Table Icon

Question

I have two columns in my fusion table, both store the names of icons. One of the tables is the default icons.

I'm wondering if there is a way to toggle between the two columns to change icons in JavaScript?

Cheers

How are you displaying the FusionTable? Are you using FusionTablesLayer on a Google Maps Javascript API v3 map? Or just in the FusionTables UI? If you are using FusionTablesLayer, you might be able to do what you want with [styleId and template](https://developers.google.com/fusiontables/docs/samples/style_and_template_ids) — geocodezip, Jan 23 '14 at 20:24
It can be done: http://www.geocodezip.com/v3_FusionTables_multipleColIconDefs.html — geocodezip, Jan 24 '14 at 18:28

geocodezip · Answer 1 · 2014-07-24T17:00:11.917

set up two maps in the FusionTables UI with the appropriate columns defining the icons (Fusion Tables Help article describing how to do that)
"publish" the map, get HTML and Javascript, that will contain the values to use for styleId and template for each configuration.
call .setOptions on the FusionTablesLayer to change between them

<!DOCTYPE html>
<html>
<head>
<meta name="viewport"></meta>
<title>Astraptes fulgerator- demo data - Google Fusion Tables</title>
<style type="text/css">
html, body, #googft-mapCanvas {
  height: 300px;
  margin: 0;
  padding: 0;
  width: 500px;
}
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
  function initialize() {
    google.maps.visualRefresh = true;
    var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) ||
      (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
    if (isMobile) {
      var viewport = document.querySelector("meta[name=viewport]");
      viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no');
    }
    var mapDiv = document.getElementById('googft-mapCanvas');
    mapDiv.style.width = isMobile ? '100%' : '500px';
    mapDiv.style.height = isMobile ? '100%' : '300px';
    var map = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(10.902224578468406, -85.43183000000005),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open'));
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));

    layer = new google.maps.FusionTablesLayer({
      map: map,
      heatmap: { enabled: false },
      query: {
        select: "col12",
        from: "1_DWHpdjPNGQwVZU5OLbMMS-6yrbIY4wTGJoRMLg",
        where: ""
      },
      options: {
        styleId: 3,
        templateId: 3
      }
    });
    if (isMobile) {
      var legend = document.getElementById('googft-legend');
      var legendOpenButton = document.getElementById('googft-legend-open');
      var legendCloseButton = document.getElementById('googft-legend-close');
      legend.style.display = 'none';
      legendOpenButton.style.display = 'block';
      legendCloseButton.style.display = 'block';
      legendOpenButton.onclick = function() {
        legend.style.display = 'block';
        legendOpenButton.style.display = 'none';
      }
      legendCloseButton.onclick = function() {
        legend.style.display = 'none';
        legendOpenButton.style.display = 'block';
      }
    }
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
  <input type="button" value="change A" onclick="layer.setOptions({styleId:2, template:2});"></input>
  <input type="button" value="change B" onclick="layer.setOptions({styleId:3, template:3});"></input>
  <div id="googft-mapCanvas"></div>
</body>
</html>

Fusion Table Icon

1 Answers1