gmaps.js remove markers based on certain criteria

Question

I am creating a map, using gmaps.js, that has different types of markers (parking, residence and academic). The removeMarkers() function of gmaps.js does not take any arguments, it just hides everything.

My goal is to have checkboxes for each category that show/hide the corresponding markers if the checkbox is checked or not. Similar to this JSFiddle which was linked from a previous question with a similar problem. My code is similar to the one in the mentioned question but I am getting Uncaught TypeError: Cannot read property 'length' of undefined in jquery.min.js:2in the console when I check one of the boxes. The other thing that is different is that I am getting the data from a JSON file and the storing it to an array.

Here is my code:

$.getJSON("json/map-data.json", function(data) {
    gMarkers['parking'] = [], gMarkers['academic'] = [], gMarkers['residence'] = [];
    // Loop through each feature in the JSON file
    for (var i = 0; i < data.features.length; i++) {
        features.push(data.features[i]);
        types.push(features[i].properties.type);
        descriptions.push(features[i].properties.description);
        titles.push(features[i].properties.title);
        markers.push(features[i].geometry.point);
        polygons.push(features[i].geometry.polygon);
        // store JSON data to temporary variable to later push to an array
        var markerForArray = {
            lat: markers[i][0],
            lng: markers[i][4],
            title: titles[i],
            infoWindow: {
                content: descriptions[i]
            }
        };

        // Store markerForArray sorted by "type"
        if (types[i] === 'parking')
            gMarkers['parking'].push(markerForArray);
        else if (types[i] === 'residence')
            gMarkers['residence'].push(markerForArray);
        else if (types[i] === 'academic')
            gMarkers['academic'].push(markerForArray);
    };

    /* Takes the poi type as a parameter */
    GMaps.prototype.addMarkersOfType = function (poi_type) {
        // save the relevant map
        console.log(gMarkers['parking'][0]);
        var theMap = this.map;
        // clear markers of this type
        realMarkers[poi_type]=[];
        // for each Gmaps marker
        $.each(gMarkers[poi_type],function(index, obj){
            // add the marker
            var marker = map.addMarkers(obj);
            // save it as real marker
            realMarkers[poi_type].push(marker);
       });
    }

    /* Takes the poi type as a parameter */
    GMaps.prototype.removeMarkersOfType = function (poi_type) {
        // for each real marker of this type
        $.each(realMarkers[poi_type], function(index, obj){
            // remove the marker
            obj.setMap(null);
        });
        // clear markers of this type
        realMarkers[poi_type]=[];
    }

    $('input[type="checkbox"').click(function() {
        var poi_type = $(this).attr('name');
        if ($(this).is(':checked'))
            map.addMarkersOfType(poi_type);
        else
            map.removeMarkersOfType(poi_type);
    });
});

The JSON data looks like this:

{
    "type": "Feature",
    "properties": {
        "title": "Parking Lot #1",
        "type": "parking",
        "description": ""
      },
    "geometry": {
        "point": [12.12345, -12.12345],
        "polygon":  [
            [12.12245, 12.12845],
            [12.12345,-12.12745],
            [12.12445,-12.12645],
            [12.12545,-12.12545]
        ]
    }
}

Here is my code on JSFiddle: http://jsfiddle.net/88cakes/sw9m4vyo/4/

Please provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that demonstrates the issue. — geocodezip, Feb 15 '15 at 18:01
Here it is: http://jsfiddle.net/88cakes/sw9m4vyo/4/, sorry about that. — Besart Bytyqi, Feb 15 '15 at 20:49

score 0 · Accepted Answer · answered Feb 16 '15 at 01:24

I must confess I didn't try to find the issue, because your approach doesn't seem to be favorable, all these arrays where you store the different objects are unnecessary.

Instead create for each checkbox an MVCObject , and create a property for this MVCObject whose value will be set to either the map(checked ) or null(unchecked) via a change-listener.

   mapData.features.forEach(function(item){
     //the checkbox related to the item-type
     var box= $('#'+item.properties.type);

     if(!box.data('mvc')){        
       //create a MVCObject and store it via checkbox-data
       box.data('mvc',new google.maps.MVCObject())
       //add a change-listener
       .change(function(){
       //set the map-property of the MVCObject to the map or null
          box.data('mvc').set('map',(box.prop('checked'))
                                      ? map.map
                                      : null)
       }).trigger('change');          
     }

     //create marker
     var marker=map.createMarker({
       lat:item.geometry.point[0],
       lng: item.geometry.point[1],
       map: box.data('mvc').get('map'),
       title: item.properties.title,
       infoWindow: {
          content: $('<div/>')
                    .append($('<h1/>').text(item.properties.title))
                    .append($('<p/>').text(item.properties.description))[0]
           }
     });

     //create polygon
     var polygon=map.drawPolygon({
       paths:item.geometry.polygon,
       map: box.data('mvc').get('map')
     });

     //bind the map-property of the marker & polygon
     //to the ma-property of the MVCObject
     marker.bindTo('map',box.data('mvc'),'map',true);
     polygon.bindTo('map',box.data('mvc'),'map',true);

   });

$(window).load(function(){
   $(document).ready(function () {
       var mapData = {
           "type": "FeatureCollection",
               "features": [{
               "type": "Feature",
                   "properties": {
                   "title": "Parking Lot 1",
                       "type": "parking",
                       "description": ""
               },
                   "geometry": {
                   "point": [39.298211, -70.439326],
                       "polygon": [
                       [39.298038, -70.439311],
                       [39.29804, -70.439267],
                       [39.298115, -70.439177],
                       [39.298137, -70.439177],
                       [39.298338, -70.438986],
                       [39.298472, -70.439384],
                       [39.298165, -70.439604],
                       [39.298038, -70.439311]
                   ]
               }
           },

           {
               "type": "Feature",
                   "properties": {
                   "title": "academic 1",
                       "type": "academic",
                       "description": ""
               },
                   "geometry": {
                   "point": [39.296499, -70.435279],
                       "polygon": [
                       [39.29657, -70.434978],
                       [39.296466, -70.434965],
                       [39.296466, -70.435131],
                       [39.296412, -70.435129],
                       [39.296404, -70.435598],
                       [39.296537, -70.435606],
                       [39.296559, -70.435589],
                       [39.296563, -70.435422],
                       [39.296541, -70.435417],
                       [39.296542, -70.435378],
                       [39.296563, -70.435375]
                   ]
               }
           },

           {
               "type": "Feature",
                   "properties": {
                   "title": "residence 1",
                       "type": "residence",
                       "description": ""
               },
                   "geometry": {
                   "point": [39.296183, -70.436438],
                       "polygon": [
                       [39.29633, -70.436782],
                       [39.296272, -70.436781],
                       [39.296257, -70.436845],
                       [39.296161, -70.436838],
                       [39.296166, -70.436602],
                       [39.296132, -70.436598],
                       [39.296118, -70.436578],
                       [39.296124, -70.436431],
                       [39.296046, -70.436417],
                       [39.296047, -70.43636],
                       [39.296001, -70.436353],
                       [39.29602, -70.436179],
                       [39.296283, -70.436197],
                       [39.296284, -70.436263],
                       [39.29627, -70.436672],
                       [39.296328, -70.4367]
                   ]
               }
           }]
       },


       map = new GMaps({
           el: '#map',
           lat: 39.298,
           lng: -72.4375,
           zoom: 15,
           zoomControl: true
       }),
       bounds=new google.maps.LatLngBounds();
       //use checkboxes  as map-controls
       map.map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push($('.nav')[0]);
       
       mapData.features.forEach(function(item){
       
         var box= $('#'+item.properties.type);
         
         if(!box.data('mvc')){        
           //create a MVCObject and store it via checkbox-data
           box.data('mvc',new google.maps.MVCObject())
           //add a chang-listener
           .change(function(){
           //set the map-property of the MVCObject to the map or null
              box.data('mvc').set('map',(box.prop('checked'))
                                          ? map.map
                                          : null)
           }).trigger('change');          
         }
         
         //create marker
         var marker=map.createMarker({
           lat:item.geometry.point[0],
           lng: item.geometry.point[1],
           map: box.data('mvc').get('map'),
           title: item.properties.title,
           infoWindow: {
              content: $('<div/>')
                        .append($('<h1/>').text(item.properties.title))
                        .append($('<p/>').text(item.properties.description))[0]
               }
         });
         
         //create polygon
         var polygon=map.drawPolygon({
           paths:item.geometry.polygon,
           map: box.data('mvc').get('map')
         });
         
         bounds.extend(marker.getPosition());
         
         //bind the map-property of the marker & polygon
         //to the ma-property of the MVCObject
         marker.bindTo('map',box.data('mvc'),'map',true);
         polygon.bindTo('map',box.data('mvc'),'map',true);
         
       });
       //bring all markers into the viewport
       map.map.fitBounds(bounds);
   });
});

body, html, #map {
    height: 100%;
    margin: 0;
    
}
.nav{
     padding:2px;
     margin:3px;
     border:1px solid #919191;
     border-radius:2px;
     background:#fff;
     text-align:right;
    }

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
<script type='text/javascript' src="https://maps.googleapis.com/maps/api/js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.12/gmaps.min.js"></script>
<div class="nav">
    <form>
        <label for="parking">Parking</label>
        <input type="checkbox" id="parking" value="parking" checked/>
        <br>
        <label for="academic">Academic</label>
        <input type="checkbox" id="academic" value="academic"  checked/>
        <br>
        <label for="residence">Residence</label>
        <input type="checkbox" id="residence" value="residence" />
    </form>
</div>
<div id="map"></div>

gmaps.js remove markers based on certain criteria

1 Answers1