Filter marker based on category

Question

I am trying to filter marker based on a category "map Version". In the handleFiles function I parsed xlsx data, and converted it into JSON format. Below u can see my result object.

result = 
0: Object { ID: "1", Title: "title1", "Status": "Closed", "Map  Version": "2002" }
1: Object { ID: "2", Title: "title2", "Status": "Closed", "Map Version": "2002" }
2: Object { ID: "3", Title: "title3", "Status": "Closed", "Map Version": "2003" }
3: Object { ID: "4", Title: "title4", "Status": "Closed", "Map Version": "2003"}
4: Object { ID: "5", Title: "title5", "Status": "Closed", "Map Version": "2005" }
.
.
.

Within the function I created marker and put it on the map. For filtering the marker I added a filterMarkers functions within the handleFiles function, cause otherwise I don't have access to some objects. Additionally I created a select box in HTML. If I click on one of my categories, nothing happens. I even don't get an error message. Can someone tell me what I am doing wrong?

I suppose that it has something to do with the scope of my functions. Cause if my document is ready, just the xlsx file is recognized and not the categories, that I select.

function handleFile(e) {
 //Get the files from Upload control
    var files = e.target.files;
    var i, f;
    var gmarkers = [];

 //Loop through files
    for (i = 0, f = files[i]; i != files.length; ++i) {
        //Loop over files
        //convert data into json format as result object
            });

           //create global infoWindow object
           var infoWindow = new google.maps.InfoWindow();
           var markers = [];
           var i, newMarker;


           //loop over json format 
           for (i = 0, length = result.length; i < length; i++) {
                var data = result[i];
                var category = data["Map Version"];

                latLng = new google.maps.LatLng(parseFloat(data.Latitude), parseFloat(data.Longitude));

                //creating a marker and putting it on the map
                 newMarker = new  google.maps.Marker({
                    position: latLng,
                    category: category,
                    map: map

                });

                gmarkers.push(newMarker);



            //add Closures, pass current marker and current data to anonymus function
            (function(marker, data) {
                // Attaching a click event to the current marker
                google.maps.event.addListener(marker, "click", function(e) {
                    infoWindow.setContent("<h3>" + data.Title + "</h3>" +
                                          "Component: " + data["Component"] + "<br>" +
                                          "Created by: " + data["Created By"] + "<br>" +
                                          "Issue Status: " + data["Issue Status"] + "<br>" + 
                                          "Impact Classification: " + data["Impact Classification"] + "<br>"
                                          );
                    infoWindow.open(map, marker);
                });


             }) (newMarker, data);

           }

           filterMarkers = function (category) {
                console.log(category + "ausgewählt");
                for (i=0; i<newMarker.length; i++) {
                    marker = gmarkers[i];

                    if (marker.category == category || category.length === 0) {
                        marker.setVisible(true);
                    }
                    else {
                        marker.setVisible(false);
                    }
                }
             }
        }
    };
        reader.readAsArrayBuffer(f);
   }


$(document).ready(function(){
  $('#files').change(handleFile);

  });

Answer 1

I think the issue is with initialization of marker object.

//creating a marker and putting it on the map
newMarker = new  google.maps.Marker({
    position: latLng,
    category: category,
    map: map
});

gmarkers.push(newMarker);

Note that category field is not defined in the list of MapOptions fields:

https://developers.google.com/maps/documentation/javascript/reference#MapOptions

I believe the API just ignores fields that are not supposed to be in MapOptions. You can add the category field yourself after the marker initialization. Something like

//creating a marker and putting it on the map
newMarker = new  google.maps.Marker({
    position: latLng,
    map: map
});
newMarker.category = category;

gmarkers.push(newMarker);

You can see similar example in the following answer:

https://stackoverflow.com/a/47329280/5140781

Also, in filterMarkers() function you have the following loop

for (i=0; i<newMarker.length; i++) {...

I believe you should use gmarkers.length instead of the newMarker.length as newMarker is not an array in your code.

I hope this helps!