Question

I have the code below. What I’m trying to do, is when I’ll reach a specific zoom point(>8) then to display some pins on the map. This is working fine. However, as you can see below I have and an else statement. In this else statement I want to remove the pins in any occasion the zoom is less than 8. Unfortunately, I can’t find a solution. Can anyone help me?

var map = $('#map_canvas').gmap('get', 'map');
var zoomLevel = 1;
//var marker;
$(map).addEventListener('zoom_changed', function() {
    var i, prevZoomLevel;

    prevZoomLevel = zoomLevel;

    map.getZoom() < 15 ? zoomLevel = 1 : zoomLevel = 2;

    if (prevZoomLevel === zoomLevel) {
         if (map.getZoom() > 8) {      
             for (var i = 0; i < <?= $store_records ?>; i++) { 
                $('#map_canvas').gmap('addMarker', { 
                        'position': new google.maps.LatLng(store_data.records[i].lat, store_data.records[i].lng), 
                        'icon': imageStores,
                        'visible': true
                }).click(function() {
                     $('#map_canvas').gmap('openInfoWindow', { 'content': store_data.records[i].name  }, this);
                });

                //marker = new google.maps.Marker({
                        //'position': new google.maps.LatLng(store_data.records[i].lat, store_data.records[i].lng)
              //  });
            }
         }
         else {

             for (var i = 0; i < <?= $store_records ?>; i++) { 
                //marker.setVisible(false);
             }
        }
   }
});

UPDATE:

The problem is the I have and other pins apart from these. So, I want explicitely to remove the aforementioned pins. Moreover, when I reach on zoom>8 then, when I go to zoom<8 the pin is still be displayed

Answer 1

I would try one of these:

if (map.getZoom() > 8) {      
         for (var i = 0; i < <?= $store_records ?>; i++) { 
            $('#map_canvas').gmap('addMarker', { 
                    'position': new google.maps.LatLng(store_data.records[i].lat, store_data.records[i].lng), 
                    'icon': imageStores,
                    'visible': true
            }).click(function() {
                 $('#map_canvas').gmap('openInfoWindow', { 'content': store_data.records[i].name  }, this);
            });

            marker = new google.maps.Marker({
                    'position': new google.maps.LatLng(store_data.records[i].lat, store_data.records[i].lng)
            });
            marker.conditionalVisibility = true; //first option
            conditionalMarkers.push(marker);     //second option, conditionalMarkers is an array declared globally
        }
     }
     else {
         //first option
         for (var i = 0; i < <?= $store_records ?>; i++) { 
            if (marker.conditionalVisibility)
                marker.setMap(null);
         }
         //second option
         for (var i = 0; i < conditionalMarkers.length; i++) { 
            marker.setMap(null);
         }
         conditionalMarkers.length = 0;

or something similar.

Hope this helps