Карты API API отображаются true/false для группы

Question

У меня есть пара (или выделение) в моем API Карт. Все эти маркеры принадлежат к определенной группе, как «дом». И некоторые из них видны, а некоторые нет. Я хочу изменить видимую истину/ложь всей группы маркеров сразу, используя событие DOM. Событие кнопки ONCLICK, которое вызывает JS, чтобы быть конкретным.

До сих пор я не мог найти или придумать какой-либо способ решения моей проблемы. Я надеюсь, что кто-нибудь сможет мне помочь.

<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> 

В ответ на @MrUpsidown

Где ваша кнопка "OnClick"?

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

Какую функцию она вызовет?

Нажав на эту ссылку, измените меню на моей странице и где {!!! something-here !!}, я думаю, должен быть сценарий, который изменяет видимость определенной группы.

Как вы добавляете свои «много» маркеров на карту?

<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> 

Что вы пробовали?

«Я не смог найти или придумать любой способ решения моей проблемы».

Answer 1

Добавить каждый маркер в массив. В функции, вызванной нажатием кнопки, прокрутите массив маркеров. Для каждого маркера проверьте, принадлежит ли он интересующей вас группе, и если да, звоните 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>