Hide specific markers in Fusion Layer of Google Map

Question

I am using a Fusion Layer to display markers in a google map.

I want to use buttons that will hide specific marker types on the map. For example, a red button that will only hide the red markers and a green button that will only hide the green markers.

I currently have 4 marker types and they are styled by buckets that take data from a "type" column.

I have tried displaying each marker type in its own layer and just hiding the layers individually. Unfortunately google only allows you to style one fusion layer, so I can only use one layer to display the different marker types.

If I could just figure out how to target the markers based on the "type" column, then I could hide specific markers.

Does anyone know how to do that?

My code:

<script type="text/javascript">
  function initialize() {
    var myLatlng = new google.maps.LatLng(37.24,-121.9000);

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: myLatlng,
      zoom: 11
    });

    var FMlayer = new google.maps.FusionTablesLayer({
      query: {
        select: 'Location',
        from: '1zJo4YLRM5VVI_djqSV229FMNFyeGaHGrcczQMSHR',
      },
      templateId: 3,
      styles: [{
        where: 'Type = 1',
        markerOptions: {
          iconName: 'large_green'
        }
      },{
        where: 'Type = 2',
        markerOptions: {
          iconName: 'large_red'
        }
      },{
        where: 'Type = 3',
        markerOptions: {
          iconName: 'large_yellow'
        }
      },{
        where: 'Type = 4',
        markerOptions: {
          iconName: 'large_blue'
        }
      }],
      map: map,
    });
  }
  google.maps.event.addDomListener(window, 'load', initialize);

</script>

My table looks something like this:

Type | Name   | Location | Phone
1    | Name1  | Address1 | 555-555-5550
1    | Name2  | Address2 | 555-555-5551
2    | Name3  | Address3 | 555-555-5552
2    | Name4  | Address4 | 555-555-5553
3    | Name5  | Address5 | 555-555-5554
4    | Name6  | Address6 | 555-555-5555

The marker "Type" determines the style of the marker.

What does your code look like? What does your FusionTable look like? — geocodezip, May 20 '15 at 22:02

score 0 · Answer 1 · answered May 21 '15 at 01:18

There is no way to 'hide' a Marker in a FusionTable, you simply must not select these markers.

To achieve it set a new query so that the particular markers will be omitted.

This will set a query that will exclude the markers with the Type:2(red markers):

FMlayer.setOptions({query: {
    select: 'Location',
    from: '1zJo4YLRM5VVI_djqSV229FMNFyeGaHGrcczQMSHR',
    where:'Type not in(2)'
  }});

score 0 · Answer 2 · answered May 21 '15 at 02:18

Example using a dynamic where clause based on the state of check boxes:

proof of concept fiddle

(based partially on this example in the documentation)

code snippet:

var FMlayer;
var map;

function initialize() {
  var myLatlng = new google.maps.LatLng(37.24, -121.9000);

  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: myLatlng,
    zoom: 10
  });

  FMlayer = new google.maps.FusionTablesLayer({
    query: {
      select: 'Location',
      from: '1zJo4YLRM5VVI_djqSV229FMNFyeGaHGrcczQMSHR'
    },
    templateId: 3,
    styles: [{
      where: 'Type = 1',
      markerOptions: {
        iconName: 'large_green'
      }
    }, {
      where: 'Type = 2',
      markerOptions: {
        iconName: 'large_red'
      }
    }, {
      where: 'Type = 3',
      markerOptions: {
        iconName: 'large_yellow'
      }
    }, {
      where: 'Type = 4',
      markerOptions: {
        iconName: 'large_blue'
      }
    }],
    map: map,
  });
  google.maps.event.addDomListener(document.getElementById('t1'), 'click', updateQuery);
  google.maps.event.addDomListener(document.getElementById('t2'), 'click', updateQuery);
  google.maps.event.addDomListener(document.getElementById('t3'), 'click', updateQuery);
}

function updateQuery() {
  var whereArr = [];
  var whereStr = "";
  if (document.getElementById('t1').checked) whereArr.push("1");
  if (document.getElementById('t2').checked) whereArr.push("2");
  if (document.getElementById('t3').checked) whereArr.push("3");
  if (whereArr.length == 0) {
    FMlayer.setMap(null)
  } else {
    FMlayer.setMap(map);
  }
  /*
  for (var i = 0; i < whereArr.length; i++) {
      whereStr += whereArr[i];
      if (i < whereArr.length - 1) whereStr += ",";
  } */
  whereStr = whereArr.join(',');
  FMlayer.setQuery({
    select: 'Location',
    from: '1zJo4YLRM5VVI_djqSV229FMNFyeGaHGrcczQMSHR',
    where: 'Type IN(' + whereStr + ')'
  });
  document.getElementById('query').innerHTML = "select:" + FMlayer.getQuery().select + "<br>from:" + FMlayer.getQuery().from + "<br>where:" + FMlayer.getQuery().where;
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?ext=.js"></script>
Type 1 (Green)
<input type="checkbox" id="t1" checked="checked" />Type 2 (Red)
<input type="checkbox" id="t2" checked="checked" />Type 3 (Yellow)
<input type="checkbox" id="t3" checked="checked" />
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>Yellow
<div id="query"></div>

Hide specific markers in Fusion Layer of Google Map

2 Answers2