Карты Google V3 - Включение/выключение групп маркеров

Question

В настоящее время я пытаюсь использовать Карты Google с кучей маркеров (извлеченных из файла данных JSON). Я хочу иметь возможность группировать маркеры в одной из двух категорий и иметь возможность отключать их или включать.

Я до такой степени, что карта работает, указатели отображаются, а кнопки переключателя включаются и выключаются - все, что осталось, это добавить маркеры в группы и привязать кнопки переключателя к отображению/скрывая маркеры на карте.

Я знаю, что могу использовать marker.setVisible(false/true), но я не уверен, как и где его использовать.

Я новичок в использовании API карт Google v3, поэтому любое направление с этим было бы высоко оценено.

У меня настроить скрипку с тем, что у меня есть до сих пор, вы можете увидеть его здесь: https://jsfiddle.net/6n25g3n7/4/

Answer 1

Вы должны сделать свой markers переменную был доступ к событию щелчка.

Пример кода:

var markers = []; 

function addMarkerToMap(map, markerData){ 
    for(var i = 0; i < markerData.length; i++){  
     // init marker 

     markers.push(marker); //push to marker's array 
    } 
} 

function clickEvent(){ 
    for(var key in markers){ 
     markers[key].setVisible(true/false); 

    } 
} 

скрипку: https://jsfiddle.net/6n25g3n7/5/ К сожалению о коде немного беспорядок.

Если у Вас возникли вопросы относительно кода, пожалуйста, комментарий :)

Answer 2

Это один имеет оба маркера включения и выключения. Проверьте jsfiddle для всех изменений. Мне пришлось переструктурировать часть вашего кода.

function createSwitches(markers){ 
    var html = '<div class="switches"><span class="switch-title">Show Me</span></div>'; 

    // ADD YOU SWITCHES HERE! 
    // Make sure the same order as the google markers 
    var all_switches = [ 
     { 
      html: '<span class="whats-on-wrapper"><span data-target="whats-on" class="switch switch-on">Item Group 2</span></span>', 
     }, 
     { 
      html: '<span class="stand-wrapper"><span data-target="stand" class="switch switch-on">Item Group 1</span></span>', 
     } 
    ]; 

    // Add the main bar element 
    $('.map-container').prepend(html); 

    // Loop through all your switches and add them 
    // with the event 
    for (var i = 0; i < all_switches.length; i++) { 

     var element = $(all_switches[i]["html"]); 

     (function(index, element, markers) { 
      $(element).on('click', function() { 
      var this_marker = markers[index]; 
      var current = String(this_marker.visible); 
      var toggle = (current === "true") ? false : true; 

      this_marker.setVisible(toggle); 

      }); 
     })(i, element, markers) 


     $('.switches').append($(element)) 
    } 

    // Set the toggle animation 
    $('.switches .switch').click(function(){ 
     $(this).toggleClass('switch-on'); 
     $(this).toggleClass('switch-off'); 
    }); 
} 

https://jsfiddle.net/6n25g3n7/8/