Untitled

{
    "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] },
              },
            ]
}

<!DOCTYPE html>
<html>
  <head>
    <style>
    <link rel="stylesheet" href="style.css">
    </style>
  </head>
  <body>

    <script>
      var gmarkers1 = [];
      var markers1 = [];
      var map;

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: new google.maps.LatLng(2.8,-187.3),
          mapTypeId: 'terrain',
          streetViewControl: false,
          mapTypeControl: false
        });

        var script = document.createElement('script');

        script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
        document.getElementsByTagName('head')[0].appendChild(script);
      }

      window.eqfeed_callback = function(results) {
        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]);
          var marker = new google.maps.Marker({
            position: latLng,
            map: map
          });
        }
      }

      gmarkers1.push(marker1);

// Function to filter markers by category

    filterMarkers = function (category) {
    for (i = 0; i < markers1.length; i++) {
        marker = gmarkers1[i];

        // If is same category or category not picked
        if (marker.category == category || category.length === 0) {
            marker.setVisible(true);
        }
        // Categories don't match
        else {
            marker.setVisible(false);
        }
      }
    }

    </script>

    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

    <div class="mapWrap">
      <div id="map"></div>

      <div class="investCast">

        <select id="mag" onchange="filterMarkers(this.value);">
        <option value="">Selected the magnitude</option>
        <!-- value="4.5=<" Is this correct? I want to load all the values less or equal than 4.5 -->
        <option value="4.5=<">Less than or equal 4.5</option>
        <!-- value="4.6 to 4.9=<" Is this correct? I want to load all the values between 4.6 to 4.9 -->
        <option value="4.6 to 4.9">Between 4.6 and 4.9</option>
        <!-- value="4.6 to 4.9=<" Is this correct? I want to load all the values greater or equal 5 -->
        <option value=">=5">Greater than or equal 5</option>
        </select>

    </div>
    </div>

  </body>
</html>