As to your code, sorry if it is kind of late just saw this about a year and some months later, I think a nice and simple way to do so is what is listed in this codepen example. Hope it helps.
Example:
https://codepen.io/apsolut/pen/rWGEWV
//k00rdinate http://www.mapcoordinates.net/en
//this is MAPbox
//also google API is here: https://appendto.com/2016/09/advanced-google-maps-with-javascript-filtering-and-displaying-information/
L.mapbox.accessToken = 'pk.eyJ1IjoiZG9zcyIsImEiOiI1NFItUWs4In0.-9qpbOfE3jC68WDUQA1Akg';
var map = L.mapbox.map('map', 'mapbox.light') .setView([45.2671352, 19.8335496], 6);;
var featureLayerGeoJSON = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"marker-color": "#dc1000",
"marker-size": "medium",
"marker-symbol": "heliport",
"CAT_CODE": "novisad"
},
"geometry": {
"type": "Point",
"coordinates": [
19.8335496,
45.2671352
]
}
},
{
"type": "Feature",
"properties": {
"marker-color": "#2095c8",
"marker-size": "large",
"marker-symbol": "1",
"CAT_CODE": "beograd"
},
"geometry": {
"type": "Point",
"coordinates": [
20.4589216,
44.786568
]
}
},
{
"type": "Feature",
"properties": {
"marker-color": "#dc0000",
"marker-size": "medium",
"marker-symbol": "",
"CAT_CODE": "beograd"
},
"geometry": {
"type": "Point",
"coordinates": [
20.5589216,
44.986568
]
}
},
{
"type": "Feature",
"properties": {
"marker-color": "#f19",
"marker-size": "medium",
"marker-symbol": "3",
"CAT_CODE": "sarajevo"
},
"geometry": {
"type": "Point",
"coordinates": [
18.4130763,
43.8562586
]
}
},
{
"type": "Feature",
"properties": {
"marker-color": "#3bd2d7",
"marker-size": "medium",
"marker-symbol": "2",
"CAT_CODE": "zagreb"
},
"geometry": {
"type": "Point",
"coordinates": [
15.981919,
45.8150108
]
}
},
{
"type": "Feature",
"properties": {
"marker-color": "#dc1000",
"marker-size": "medium",
"marker-symbol": "",
"CAT_CODE": "novisad",
"moj_filter": "mojfilter"
},
"geometry": {
"type": "Point",
"coordinates": [
19.8335496,
45.2671352
]
}
}
]
};
map.featureLayer.setGeoJSON(featureLayerGeoJSON);
// Find and store a variable reference to the list of filters.
var filters = document.getElementById('filters');
// Wait until the marker layer is loaded in order to build a list of possible
// types. If you are doing this with another featureLayer, you should change
// map.featureLayer to the variable you have assigned to your featureLayer.
var makeCheckboxes = function() {
// Collect the types of symbols in this layer. you can also just
// hardcode an array of types if you know what you want to filter on,
// like var types = ['foo', 'bar'];
var typesObj = {}, types = [];
map.featureLayer.eachLayer(function (entity) {
typesObj[entity.feature.properties['CAT_CODE']] = true;
})
for (var k in typesObj) types.push(k);
var checkboxes = [];
// Create a filter interface.
for (var i = 0; i < types.length; i++) {
// Create an an input checkbox and label inside.
var item = filters.appendChild(document.createElement('div'));
var checkbox = item.appendChild(document.createElement('input'));
var label = item.appendChild(document.createElement('label'));
checkbox.type = 'checkbox';
checkbox.id = types[i];
checkbox.checked = true;
// create a label to the right of the checkbox with explanatory text
label.innerHTML = types[i];
label.setAttribute('for', types[i]);
// Whenever a person clicks on this checkbox, call the update().
checkbox.addEventListener('change', update);
checkboxes.push(checkbox);
}
// This function is called whenever someone clicks on a checkbox and changes
// the selection of markers to be displayed.
function update() {
var enabled = {};
// Run through each checkbox and record whether it is checked. If it is,
// add it to the object of types to display, otherwise do not.
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) enabled[checkboxes[i].id] = true;
}
map.featureLayer.setFilter(function(feature) {
// If this symbol is in the list, return true. if not, return false.
// The 'in' operator in javascript does exactly that: given a string
// or number, it says if that is in a object.
// 2 in { 2: true } // true
// 2 in { } // false
return (feature.properties['CAT_CODE'] in enabled);
});
}
}
makeCheckboxes()
Best Answer
If you don't mind a 3rd party app, you could try Arc2Earth Sync
It will connect to Fusion Tables on your account's behalf and make it look like an ArcGIS Feature service. It can also use your ArcGIS.com credentials to create/update web maps so your FT tables show up automatically in the ArcGIS iOS/Android apps (or any of the ArcGIS Online apps/apis).
Check out the sample here. And here's the same data used on Google Maps directly from the Fusion Table
We've got a big update coming out soon too. Image tiles, vector tiles, UTF grids are all automatically created/updated when your data changes and then hosted for you (or move the caches wherever you like). New providers for Fulcrum, CartoDB and plain ole local shapefiles make it really easy to get started and work with your data in ArcGIS Online.
cheers brian