How to filter properties in json data in Google Maps API v.3 with select?

Question

I would like to filter properties in json data in google maps api with select.

I've seen a few examples here but I have not found an example that loads a external file json and filter the properties.

Here, I'm working on an example of developers.google. My problem is in the filters in java file. I have not found a way to do this yet.

I want to filter out the magnitude of earthquakes.

Could someone help me please?

Thanks in advance

See please: http://jsfiddle.net/Alisson_BRA/9dzj49op/1/

Full JSON: https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js

JSON (sample), HTML and JS:

{
    "type": "FeatureCollection",
    "features": [{
            "type": "Feature",
            "properties": {
                "mag": 5.4,
                "place": "48km SSE of Pondaguitan, Philippines",
                "status": "AUTOMATIC" },
            "geometry": {
                "type": "Point",
                "coordinates": [126.3832, 5.9775] },
                },
                 {
             "type": "Feature",
             "properties": {
                "mag": 5.7,
                "place": "35km ESE of Ndoi Island, Fiji",
                "status": "REVIEWED" },
            "geometry": {
                "type": "Point",
                "coordinates": [-178.3725, -20.753] },
              },
            ]
}

geocodezip · Accepted Answer

You are loading all the markers on the map to start. One option to filter them, would be to add the data you want to filter them on to the marker (as a property):

for (var i = 0; i < results.features.length; i++) {
  var coords = results.features[i].geometry.coordinates;
  var latLng = new google.maps.LatLng(coords[1], coords[0]);

  //Creating a marker and putting it on the map, add magnitude as a "custom property"
  var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    mag: results.features[i].properties.mag
  });
  gmarkers.push(marker);
}

Then filter the markers by that value:

// Function to filter markers by category
var filterMarkers = function(category) {
  switch (category) {
    case "4.5=<":
      for (i = 0; i < gmarkers.length; i++) {
        marker = gmarkers[i];
        // If is same category or category not picked
        if (marker.mag <= 4.5) {
          marker.setVisible(true);
        }
        // Categories don't match 
        else {
          marker.setVisible(false);
        }
      }
      break;
    case "4.6 to 4.9":
      for (i = 0; i < gmarkers.length; i++) {
        marker = gmarkers[i];
        // If is same category or category not picked
        if (4.6 <= marker.mag && marker.mag <= 4.5) {
          marker.setVisible(true);
        }
        // Categories don't match 
        else {
          marker.setVisible(false);
        }
      }
      break;
    case ">=5":
      for (i = 0; i < gmarkers.length; i++) {
        marker = gmarkers[i];
        // If is same category or category not picked
        if (5 <= marker.mag) {
          marker.setVisible(true);
        }
        // Categories don't match 
        else {
          marker.setVisible(false);
        }
      }
      break;
    default:
      for (i = 0; i < gmarkers.length; i++) {
        marker = gmarkers[i];
        marker.setVisible(true);
      }
  }
}

proof of concept fiddle

code snippet:

var gmarkers = [];
var markers = [];
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 1,
    center: new google.maps.LatLng(30, 0),
    mapTypeId: 'terrain',
    streetViewControl: false,
    mapTypeControl: false
  });

  // Create a

How to filter properties in json data in Google Maps API v.3 with select?

Answers (2)

Related Questions