Click here to Skip to main content
15,878,316 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I've managed to add markers that show every airport in the world onto a Google Map. However I'm stuck when I need to filter multiple groups of categories:

Type of airport: Small, Large, Medium, Closed

Country: IE, RUS, US etc.
I want to create a button which can filter what type of airport is displayed on the map. So when I click small, the small airports are displayed, when I click large, the large airports are displayed, etc. The same goes with the countries.

The data of all the airports comes from a .json file. I have provided an example of an airport below. I have also provided a screenshot of the map looks in a webpage.

Code I used:

main.html

var infowindow = new google.maps.InfoWindow();
function gotoFeature(featureNum) {
var feature = map.data.getFeatureById(features[featureNum].getId());
if (!!feature) google.maps.event.trigger(feature, 'changeto', {feature: feature});
else alert('feature not found!');
}

map.data.addListener('click', function(event) {
var myHTML = event.feature.getProperty("Description");
var myHTML = event.feature.getProperty("Description");
var categories = ["wikipedia_link", "local_code", "id", "keywords", "home_link", "latitude_deg", "longitude_deg", "iso_region", "municipality", "gps_code"];
function excludeCat(d) {
if (categories.indexOf(d.split(":")[0]) < 0) {
return d
};
};
myHTML = myHTML.split("
").filter(excludeCat).join("
");
infowindow.setContent("
"+myHTML+"
");
infowindow.setPosition(event.feature.getGeometry().get());
infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)});
infowindow.open(map);

});

.json Airport Details:

{ "type": "Feature", "properties": { "Name": "Innsbrook Pavilion Heliport", "Description": "id: 16018

ident: 9VA8

type: heliport

latitude_deg: 37.648799896240234

longitude_deg: -77.58499908447266

elevation_ft: 250

continent: NA

iso_country: US

iso_region: US-VA

municipality: Richmond

scheduled_service: no

gps_code: 9VA8

iata_code:

local_code: 9VA8

home_link:

wikipedia_link:

keywords: " }, "geometry": { "type": "Point", "coordinates": [ -77.584999084472656, 37.648799896240234, 0.0 ] } }

What I have tried:

I have tried Javascript solutions, but it did not work
Posted
Updated 13-Nov-16 8:11am

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900