CODEWITHSUNDEEP
javascriptjsongoogle-mapsselectgoogle-maps-api-3
Alisson
Alisson

Reputation: 23

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

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

Here, I'm working on an example of developers google. My problem is in the filters in java file.

I want to filter out the magnitude and the status of earthquakes. I have not found a way to do this yet.

Could someone help me please?

Thanks in advance

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

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

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);

filterMarkers = function (category) {
for (i = 0; i < markers1.length; i++) {
    marker = gmarkers1[i];
    if (marker.category == category || category.length === 0) {
        marker.setVisible(true);
    }
    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 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>

<div class="mapWrap">
<div class="investCast">
<select id="status" onchange="filterMarkers(this.value);">  
    <option value="">Selected the status</option>
    <option value="REVIEWED">REVIEWED</option>
    <option value="AUTOMATIC">AUTOMATIC</option>
    <option value="PUBLISHED">PUBLISHED</option>
    </select>
</div>
</div>
<div id="map"></div>
</body>
</html>

Upvotes: 0

Views: 898

Answers (1)

xomena
xomena

Reputation: 32178

In your function that filters markers you should take into account state of both select elements for magnitude and status. I slightly modified your code and added function that filters by both values. Have a look at the following 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 <script> tag and set the USGS URL as the source.
  var script = document.createElement('script');
  // This example uses a local copy of the GeoJSON stored at
  // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
  script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
  document.getElementsByTagName('head')[0].appendChild(script);
}

// Loop through the results array and place a marker for each
// set of coordinates.
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]);

    //Creating a marker and putting it on the map
    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      title: "Mag: " + results.features[i].properties.mag + "  -  " + "Status: " + results.features[i].properties.status,
      mag: results.features[i].properties.mag,
      status: results.features[i].properties.status
    });
    gmarkers.push(marker);
  }
}


// Function to filter markers by category
var filterMarkers = function(category) {
  console.log("category=" + category);
  const statusEl = document.getElementById("status");
  const magEl = document.getElementById("mag");    
  switch (category) {
    case "4.5=<":
    case "4.6 to 4.9":
    case ">=5":
    	filterByMagnitudeAndStatus(category, statusEl.value);
      break;
    case "REVIEWED":
    case "AUTOMATIC":
    case "PUBLISHED":
    	filterByMagnitudeAndStatus(magEl.value, category);
      break;
    default:
    	filterByMagnitudeAndStatus(magEl.value, statusEl.value);
  } // Fecha o  switch (category)
} // Fecha o Function to filter

function filterByMagnitudeAndStatus(magnitude, status) {
  //debugger;
	for(const marker of gmarkers) {
  	marker.setVisible(false);
  }
  
  const filteredArrayMagnitude = gmarkers.filter(function(marker){
 		return magnitude === "4.5=<" ? marker.mag <= 4.5 : (magnitude === "4.6 to 4.9" ? 4.6 <= marker.mag && marker.mag <= 4.9 : (magnitude === ">=5" ? 5 <= marker.mag : (magnitude === "" ? true : false))); 
  });
  
  const filteredArrayMagnitudeAndStatus = filteredArrayMagnitude.filter(function(marker) {
  	return status==="REVIEWED" ? marker.status == "REVIEWED" : (status==="AUTOMATIC" ? marker.status == "AUTOMATIC" : (status==="PUBLISHED" ? marker.status == "PUBLISHED" : (status==="" ? true : false)));
  });
  
  for (const marker of filteredArrayMagnitudeAndStatus) {
  	marker.setVisible(true);
  }
}
#map {
  height: 300px;
}
html,
body {
  height: 400px;
  margin: 0;
  padding: 0;
}
<div><h2 id="title">Earthquakes</h2></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap">
</script>

<div class="mapWrap">
 
  <div class="investCast">

    <select id="mag" onchange="filterMarkers(this.value);">  
        <option value="">Selected the magnitude</option>
        <option value="4.5=<">Less than or equal 4.5</option>
        <option value="4.6 to 4.9">Between 4.6 and 4.9</option>
        <option value=">=5">Greater than or equal 5</option>
        </select>

  </div>
</div>

<div class="mapWrap">
 
  <div class="investCast">

    <select id="status" onchange="filterMarkers(this.value);">  
        <option value="">Selected the status</option>
        <option value="REVIEWED">REVIEWED</option>
        <option value="AUTOMATIC">AUTOMATIC</option>
        <option value="PUBLISHED">PUBLISHED</option>
        </select>

  </div>
</div>

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

I hope this helps!

Upvotes: 2

Related Questions