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