Maps API markers visible true/false of a group

Question

I have a couple (or allot) markers in my Maps API. All these markers belong to a certain group, like 'home'. And some of them are visible and some are not. I wanna change the visible true/false of a whole group of markers at once using a DOM event. An ONCLICK button event that calls a JS to be specific.

So far, I've unable to find or come up with any way of solving my problem. I hope anyone can help me out.

<div id="map" class="map"></div>
<script>
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 6,
            center: {lat: 52.0000, lng: 5.0000},
            mapTypeId: 'terrain'
        });

        var marker14 = new google.maps.Marker({
            position: {lat: 51.9135, lng: 4.4212},
            map: map,
            title: '2017-02-02 13:27:30',
            group: 'home',
            visible: true
        });
    }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key={API-KEY}&callback=initMap"></script>

In reply to @MrUpsidown

Where is your "onclick" button?

<a href="#" onclick="changeMenu(''),{!!!something-here!!}" id="nav-change" title="CHANGE"></a>

What function does it trigger?

Clicking in this link changes the menu on my page, and where {!!!something-here!!} is I think should be a script that changes the visibility of a certain group.

How do you add your "many" markers to the map?

<script>
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 6,
            center: {lat: 52.0000, lng: 5.0000},
            mapTypeId: 'terrain'
        });

        var marker14 = new google.maps.Marker({
            position: {lat: 51.9135, lng: 4.4212},
            map: map,
            title: '2017-02-02 13:27:30',
            group: 'home',
            visible: true
        });

        var marker16 = new google.maps.Marker({
            position: {lat: 51.9135, lng: 4.4212},
            map: map,
            title: '2017-02-02 13:27:30',
            group: 'home',
            visible: false
        });

        var marker4 = new google.maps.Marker({
            position: {lat: 51.9135, lng: 4.4212},
            map: map,
            title: '2017-02-02 13:27:30',
            group: 'home',
            visible: true
        });

        var marker20 = new google.maps.Marker({
            position: {lat: 51.9135, lng: 4.4212},
            map: map,
            title: '2017-02-02 13:27:30',
            group: 'work',
            visible: true
        });

        var marker8 = new google.maps.Marker({
            position: {lat: 51.9135, lng: 4.4212},
            map: map,
            title: '2017-02-02 13:27:30',
            group: 'work',
            visible: false
        });
    }
</script>

What have you tried?

"I've unable to find or come up with any way of solving my problem."

Answer 1

Add every marker to an array. In the function triggered by the button click, loop through your markers array. For each marker, check if it belongs to the group you are interested in and if yes, call setVisible(true).

var markers = [];

function initMap() {

  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 5,
    center: {
      lat: 53,
      lng: 4.5
    }
  });

  var marker1 = new google.maps.Marker({
    position: {
      lat: 51.9335,
      lng: 4.2212
    },
    map: map,
    title: '2017-02-02 13:27:30',
    group: 'home',
    visible: false
  });

  var marker2 = new google.maps.Marker({
    position: {
      lat: 52.9135,
      lng: 4.1212
    },
    map: map,
    title: '2017-02-02 13:27:30',
    group: 'home',
    visible: false
  });

  var marker3 = new google.maps.Marker({
    position: {
      lat: 53.9135,
      lng: 4.5212
    },
    map: map,
    title: '2017-02-02 13:27:30',
    group: 'home',
    visible: true
  });

  var marker4 = new google.maps.Marker({
    position: {
      lat: 51.8835,
      lng: 4.9912
    },
    map: map,
    title: '2017-02-02 13:27:30',
    group: 'work',
    visible: true
  });

  var marker5 = new google.maps.Marker({
    position: {
      lat: 53.9135,
      lng: 5.4212
    },
    map: map,
    title: '2017-02-02 13:27:30',
    group: 'work',
    visible: false
  });

  markers.push(marker1);
  markers.push(marker2);
  markers.push(marker3);
  markers.push(marker4);
  markers.push(marker5);
}

function setHomeGroupVisible() {

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

    if (markers[i].group === 'home') {

      markers[i].setVisible(true);
    }
  }
}

initMap();

#map-canvas {
  height: 150px;
}
button {
  margin-top: 15px;
  background: yellow;
}

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

<button onclick="setHomeGroupVisible()">
  Set Home Group Visible
</button>

<script src="//maps.googleapis.com/maps/api/js"></script>