Вывод меток определенного цвета в Google Maps при выборе их в меню

327

27 января 2017, 08:07

Пытаюсь сделать так, чтобы выбрав пункты в меню, выводились метки для этого пункта, а все остальные метки удалялись, а если убираю пункт, то чтобы все метки возвращались. Собрал версию которая только убирает значки для выбранного меню. Помогите, кто понимает в работе с Google Maps API.

var map = {}; 
 
function initialize() { 
 
  var mapProp = { 
    center: { 
      lat: -25.363, 
      lng: 131.044 
    }, 
    zoom: 8, 
    markers: [] 
  }; 
 
  map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
 
  var marker1 = new google.maps.Marker({ 
    position: { 
      lat: -25.363, 
      lng: 131.044 
    }, 
    icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png', 
    map: map, 
    category: 'blue', 
  }); 
  map.markers.push(marker1); 
  var marker2 = new google.maps.Marker({ 
    position: { 
      lat: -25.664, 
      lng: 131.044 
    }, 
    icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png', 
    map: map, 
    category: 'green', 
  }); 
  map.markers.push(marker2); 
  var marker3 = new google.maps.Marker({ 
    position: { 
      lat: -25.365, 
      lng: 131.144 
    }, 
    icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png', 
    map: map, 
    category: 'red', 
  }); 
  map.markers.push(marker3); 
  var marker4 = new google.maps.Marker({ 
    position: { 
      lat: -25.366, 
      lng: 131.244 
    }, 
    icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png', 
    map: map, 
    category: 'blue', 
  }); 
  map.markers.push(marker4); 
  var marker5 = new google.maps.Marker({ 
    position: { 
      lat: -25.565, 
      lng: 131.144 
    }, 
    icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png', 
    map: map, 
    category: 'red', 
  }); 
  map.markers.push(marker5); 
  var marker6 = new google.maps.Marker({ 
    position: { 
      lat: -25.666, 
      lng: 131.244 
    }, 
    icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png', 
    map: map, 
    category: 'green', 
  }); 
  map.markers.push(marker6); 
 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
 
 
$(document).ready(function() { 
  $('.markerBtn').bind('click', function(el) { 
    var catToToggle = $(this).attr('data-category'); 
    $.each(map.markers, function() { 
      if (this['category'] == catToToggle) { 
        this.setVisible(!this.getVisible()); 
      } 
    }); 
  }); 
});