How to remove specific group of markers? Google Maps API

Question

I want to make few groups and when I toggle specific I want to make it hidden. I will show you what I have made so far. But this hides everything, and I know why, because this marker.setVisible(true); the "marker" is global and it is not for specific group, but I don't know how to make it for specific group.

EDIT: Might not work, idk how to include js file...

Javascript

// SanMap.js
// Tool for drawing Google Maps of San Andreas.
// Written by Tim Potze

// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
// IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
// OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
// ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
// OTHER DEALINGS IN THE SOFTWARE.
//
// For more information, please refer to <http://unlicense.org>
//

/* Create a set of helper classes.
 */

/** 
 * Projection specialized for San Andreas, based on GallPetersProjection
 * available at:
 * https://developers.google.com/maps/documentation/javascript/examples/map-projection-simple
 * @class SanMapProjection
 * @constructor
 * *implements {google.maps.Projection}
 */
function SanMapProjection(tileSize) {
    /**
     * The range across the map.
     *
     * @property projectionRange_
     * @type {Number}
     */
    var projectionRange_ = tileSize;
    
    /**
     * The origin of the map.
     *
     * @property pixelOrigin_
     * @type {Object}
     */
    this.pixelOrigin_ = new google.maps.Point(projectionRange_ / 2, 
        projectionRange_ / 2);
    
    /**
     * The number of pixels per longitude degree.
     *
     * @property pixelsPerLonDegree_
     * @type {Number}
     */
    this.pixelsPerLonDegree_ = projectionRange_ / 360;
    
    /**
     * Converts a google.maps.LatLng to google.maps.Point.
     *
     * @method fromLatLngToPoint
     * @param {Object} latLng The LatLng object to convert.
     * @param {Object} opt_point optional point type to use as return type
     *  instead of google.maps.Point.
     * @return {Object} The newly created point.
     */
    this.fromLatLngToPoint = function (latLng, opt_point) {
        var point = opt_point || new google.maps.Point(0, 0);
        
        point.x = this.pixelOrigin_.x + latLng.lng() *
            this.pixelsPerLonDegree_ * 2;
        point.y = this.pixelOrigin_.y - latLng.lat() *
            this.pixelsPerLonDegree_ * 2;
            
        return point;
    }
    
    /**
     * Converts a google.maps.Point to google.maps.LatLng.
     *
     * @method fromLatLngToPoint
     * @param {Object} point The Point object to convert.
     * @return {Object} The newly created LatLng.
     */
    this.fromPointToLatLng = function (point) {
        var lng = (point.x - this.pixelOrigin_.x) /
            this.pixelsPerLonDegree_ / 2;
        var lat = (-point.y + this.pixelOrigin_.y) /
            this.pixelsPerLonDegree_ / 2;
            
        return new google.maps.LatLng(lat, lng, true);
    }
};

/**
 * Simple class for providing a google.maps.ImageMapType based on the provided
 * zoom limitations and function for providing tiles.
 * @class SanMapType
 * @constructor
 */
function SanMapType(minZoom, maxZoom, getTileUrl, tileSize) {

    /**
     * Creates an instance of google.maps.ImageMapType based on the provided
     * zoom limitations and function for providing tiles.
     *
     * @method getImageMapType
     * @param {Boolean} repeating Whether the map should repeat horizontally.
     * @return {Object} The newly created ImageMapType.
     */
    this.getImageMapType = function (repeating) {
        /* Default tileSize to 512.
         */
        tileSize = tileSize || 512;
        
        return new google.maps.ImageMapType({
            getTileUrl: function (coord, zoom) {
                var x = coord.x, 
                    y = coord.y, 
                    max = 1 << zoom;

                /* If not repeating and x is outside of the range -or- y is
                 * outside of the range, return a clear tile. This can be
                 * provided by getTileUrl, using the tile coordinates (-1, -1).
                 */
                if (y < 0 || y >= max || 
                    (repeating !== true && (x < 0 || x >= max))) {
                    return getTileUrl(zoom, -1, -1);
                }
                
                /*
                 * Return the provided tile. Make sure x is within the 
                 * range 0 - max.
                 */
                return getTileUrl(zoom, (((x % max) + max) % max), y);
            },
            tileSize: new google.maps.Size(tileSize, tileSize),
            maxZoom: maxZoom,
            minZoom: minZoom
        });
    }
};

/* Define a number of SanMap methods.
 */
function SanMap(){ }

/**
 * Creates an instance of google.maps.Map with the provided map types.
 *
 * @method createMap
 * @param {Object} canvas The element to draw the map on.
 * @param {Number} mapTypes The map types available in the map control.
 * @param {Number} zoom The initial zoom level.
 * @param {Object} center The intial center point to focus on.
 * @param {Boolean} repeating Whether the map should repeat horizontally.
 * @param {String} defaultMap The default map type.
 * @return {Object} The newly created Map.
 */
SanMap.createMap = function(canvas, mapTypes, zoom, center, repeating, 
    defaultMap) {
    /* If no mapTypes are parsed, return null and display a warning
     */
    if (mapTypes === undefined || mapTypes.length == 0) {
        console.warn("SanMap: No map types were parsed with SanMap.createMap.");
        return null;
    }

    /* Create the map
     */
    var map = new google.maps.Map(canvas,  {
        zoom: zoom || 2,
        center: center || SanMap.getLatLngFromPos(90, -90),
        zoomControl: true,
        zoomControlOptions: {
          position: google.maps.ControlPosition.RIGHT_TOP,
        },
        streetViewControl: false,
        //mapTypeControl: false,
        options: {
            gestureHandling: 'greedy'
        },
        mapTypeControlOptions: {
            mapTypeIds: Object.keys(mapTypes)
        },
        //restriction: {latLngBounds:{north: 90, south: -90, west: -90, east: 90}, strictBounds: false,}
    });

    /* Add every map type to the map.
     */
    for (var key in mapTypes) {
        if (mapTypes.hasOwnProperty(key)) {
            var type = mapTypes[key].getImageMapType(repeating || false);
            type.name = type.alt = key;
            type.projection = new SanMapProjection(type.tileSize.width);
            map.mapTypes.set(key, type);
        }
    }

    /* Set the default map type.
     */
    map.setMapTypeId(defaultMap || Object.keys(mapTypes)[0]);

    /* If not repeating, bound the viewable area.
     */
    if (!repeating) {
        bounds = new google.maps.LatLngBounds(new google.maps.LatLng(-90,-90), 
            new google.maps.LatLng(90,90));

        /* When the center changes, check if the new center is within the bounds
         * of the map. If not, move the center to within these bounds.
         */
        google.maps.event.addListener(map, 'center_changed', function () {
            if (bounds.contains(map.getCenter()))
                return;

            var lng = map.getCenter().lng(),
                lat = map.getCenter().lat();

            if (lng < bounds.getSouthWest().lng())
                lng = bounds.getSouthWest().lng();
                
            if (lng > bounds.getNorthEast().lng())
                lng = bounds.getNorthEast().lng();
                
            if (lat < bounds.getSouthWest().lat())
                lat = bounds.getSouthWest().lat();
                
            if (lat > bounds.getNorthEast().lat())
                lat = bounds.getNorthEast().lat();
                
            map.setCenter(new google.maps.LatLng(lat, lng));
        });
    }
    
    return map;
};

/* Conversion properties. */
SanMap.width = 6000;
SanMap.height = 6000; 
SanMap.ox = 0;
SanMap.oy = 0; 

/**
 * Set the properties of the map coordinate system.
 *
 * @method setMapSize
 * @param {Number} width The width of the map.
 * @param {Number} y The GTA:SA y-coordinate.
 */
SanMap.setMapSize = function (width, height, offsetx, offsety) {
    SanMap.width = width;
    SanMap.height = height;
    SanMap.ox = offsetx;
    SanMap.oy = offsety;
}

/**
 * Converts a GTA:SA coordinates to an instance of google.maps.LatLng.
 *
 * @method getLatLngFromPos
 * @param {Number} x The GTA:SA x-coordinate.
 * @param {Number} y The GTA:SA y-coordinate.
 * @return {Object} The newly created LatLng.
 */
SanMap.getLatLngFromPos = function (x, y) {
    return typeof(x) == "object" 
        ? new google.maps.LatLng((x.y - SanMap.oy) / SanMap.height * 180, (x.x - SanMap.ox) / SanMap.width * 180) 
        : new google.maps.LatLng((y - SanMap.oy) / SanMap.height * 180, (x - SanMap.ox) / SanMap.width * 180);
}

/**
 * Converts an instance of google.maps.LatLng to a GTA:SA coordinates.
 *
 * @method getPosFromLatLng
 * @param {Object} latLng The LatLng to convert..
 * @return {Object} An Object containing the GTA:SA coordinates.
 */
SanMap.getPosFromLatLng = function (latLng) {
    return {x: latLng.lng() * SanMap.width / 180 + SanMap.ox, y: latLng.lat() * SanMap.height / 180 + SanMap.oy};
}

html, body, #map-canvas {
    height: 100%;
    padding: 0;
    margin: 0;
}

<html>
<head>
    <title>Old School - Mapa</title>
    <!-- Disallow users to scale this page -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<input id="removeMarker" type="checkbox" checked="checked"></input> <!-- Toggle marker group 1 -->
<input id="removeMarker2" type="checkbox" checked="checked"></input> <!-- Toggle marker group 2 -->

<!-- The container the map is rendered in -->
<div id="map-canvas"></div>

<!-- Load all javascript -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maps.google.com/maps/api/js?sensor=false&key=YOUR_API_KEY"></script>
<script src="SanMap.js"></script>

<script>
    var mapType = new SanMapType(1, 3, function (zoom, x, y) {
        return x == -1 && y == -1 ? "tiles/map.outer.png" : "tiles/map." + zoom + "." + x + "." + y + ".png";
    });
    
    var satType = new SanMapType(1, 3, function (zoom, x, y) {
        return x == -1 && y == -1 ? "tiles/map.outer.png" : "tiles/sat." + zoom + "." + x + "." + y + ".png";
    });

    var map = SanMap.createMap(document.getElementById('map-canvas'), 
        {'Original': mapType, 'Satelit': satType}, 1, null, false, 'Original');
    
    var locations = [ // Marker group 1
        ["Burg", 1215.7954,-923.9620, 'images/icon96.png']
    ];
  
  var locations2 = [ // Marker group 2
        ["Casino", 2043.4570,1918.1044, 'images/icon89.png']
    ];
    
    for (var i = 0; i < locations.length; i++) { // Marker group 1
        placeMarker(locations[i]);
    }
    
    for (var i = 0; i < locations2.length; i++) { // Marker group 2
        placeMarker(locations2[i]);
    }
    
    function placeMarker(loc) { // Get markers from all groups
        var latLng = SanMap.getLatLngFromPos(loc[1], loc[2]);
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            optimized: true,
            icon: loc[3]
        });
        
        $('#removeMarker').click(function(event) { // Remove group 1 marker
            if(this.checked)
            {
                $(':checkbox').each(function() 
                {
                    this.checked = true;
                });
                for (var i = 0; i < locations.length; i++) { marker.setVisible(true); }
            }
            else
            {
                $(':checkbox').each(function() 
                {
                    this.checked = false;
                });
                for(var i = 0; i < locations.length; i++) { marker.setVisible(false); }
            }
        });
    
    $('#removeMarker2').click(function(event) { // Remove group 2 marker
            if(this.checked)
            {
                $(':checkbox').each(function() 
                {
                    this.checked = true;
                });
                for (var i = 0; i < locations2.length; i++) { marker.setVisible(true); } // Here must be done something to be able to remove specific marker for that group
            }
            else
            {
                $(':checkbox').each(function() 
                {
                    this.checked = false;
                });
                for(var i = 0; i < locations2.length; i++) { marker.setVisible(false); } // Here must be done something to be able to remove specific marker for that group
            }
        });
        
        var infowindow = new google.maps.InfoWindow();
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent("<div id='infowindow'>" + loc[0] + "</div>");
            infowindow.open(map, marker);
        });
        
        map.addListener('click', function() { if(infowindow) infowindow.close(); });
    }

</script>
</body>

Answer 1

The problem is that you call setVisible() method on the same marker each time when you loop in the locations array. to achieve what you want you need to store the markers objects when you create them, and after, when you need it, access it to delete them.

1 - Store markers object in array

First, create arrays corresponding to each group you want to create. After that, when you create markers, store them in the array corresponding of his category.

// Array for saving markers 
let loc1Markers = []; // markers object from group 1
let loc2Markers = []; // markers object from group 2

// loop for creation of markers in each group
for (let i=0; i<locations.length; i++){
    loc1Markers.push(placeMarker(locations[i])); // Marker pushed in group 1
}
for (var i = 0; i < locations2.length; i++) { 
    loc2Markers.push(placeMarker(locations2[i])); // Marker pushed in group 2
}

function placeMarker(loc){

    // ... here the content of your function

    return marker // return the marker object that you just created
}

In this exemple, the object marker created is returned at the end of the placeMarker function, and it is store directly in his corresponding array.

Loop through the marker array

Then, you can access each of your desired group by looping in your arrays of markers object. Modify all the lines like

for (var i = 0; i < locations.length; i++) { marker.setVisible(true); }

by calling directly the array of the group you want. Something like this for exemple :

for(let i=0; i<loc1Markers.length; i++){ 
    loc1Markers[i].setVisible(true); 
}

In this case you loop in the array with all of the markers of the group you want and when you call the setVisible() method, it's on different marker each time.