Google Fusion Table Несколько слоев с флажком

Question

Я использую таблицу Google Fusion для создания карты, которая позволяет пользователю выбирать несколько параметров цвета для одного полигона. В прилагаемом jsfiddle у меня есть рабочий пример:

Область 1 имеет серый цвет по умолчанию и красный цвет закрыт при выборе флажка. Я бы хотел, чтобы флажок «Открыть» стал причиной того, что область 1 станет зеленой. Таким образом, область 1 может иметь 3 возможных цвета (серый, красный или зеленый).

Я попытался дублировать всю информацию о слое в layer2, но не повезло, что это сработало.

Спасибо за любые предложения.

http://jsfiddle.net/EezcR/9/

function initialize() { 
    var tableId = '1_k6LlHVA4eJSgsZJ0esbImaA1HG_bgT_SDEOor0'; 

    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
     center: new google.maps.LatLng(38.33,-98.76), 
     zoom: 7, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var layer = new google.maps.FusionTablesLayer(); 
    filterMap(layer, tableId, map); 
// Initialize the first layer 
    var firstLayer = new google.maps.FusionTablesLayer({ 
     query: { 
     select: 'geometry', 
     from: '1_k6LlHVA4eJSgsZJ0esbImaA1HG_bgT_SDEOor0' 
     }, 
     styleId: 2, 
     templateId: 2, 
     map: map, 
    }); 


    google.maps.event.addDomListener(document.getElementById('A'), 
     'click', function() { 
      filterMap(layer, tableId, map); 
    }); 

    google.maps.event.addDomListener(document.getElementById('B'), 
     'click', function() { 
      filterMap(layer, tableId, map); 
    }); 
    } 


    // Filter the map based on checkbox selection. 
    function filterMap(layer, tableId, map) { 
    var where = generateWhere(); 

    if (where) { 
     if (!layer.getMap()) { 
     layer.setMap(map); 
     } 
     layer.setOptions({ 
     query: { 
      select: 'geometry', 
      from: tableId, 
      where: where 
     } 
     }); 
    } else { 
     layer.setMap(null); 
    } 
    } 

    // Generate a where clause from the checkboxes. If no boxes 
    // are checked, return an empty string. 
    function generateWhere() { 
    var filter = []; 
    var stores = document.getElementsByName('store'); 
    for (var i = 0, store; store = stores[i]; i++) { 
     if (store.checked) { 
     var storeName = store.value.replace(/'/g, '\\\''); 
     filter.push("'" + storeName + "'"); 
     } 
    } 
    var where = ''; 
    if (filter.length) { 
     where = "'name' IN (" + filter.join(',') + ')'; 
    } 
    return where; 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 





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

<div>Area 1: 
    <input type="checkbox" name="store" 
     id="A" value="A"> 
    <label>Closed</label> 
    <input type="checkbox" name="store" 
     id="C" value="C"> 
    <label>Open</label> 

</div> 
    <div>Area 2: 
    <input type="checkbox" name="store" 
     id="B" value="B"> 
    <label>Closed</label> 
    <input type="checkbox" name="store" 
     id="D" value="D"> 
    <label>Open</label> 

</div> 

Answer 1

Когда я прочитал ваши требования, что вам не нужно несколько слоев, необходимо несколько стилей для одного слоя.

• 1 запрос, который выбирает все магазины
• 1 по умолчанию стиля (серые) для всех магазинов
• 1 типа (красного) для закрытых магазинов
• 1 типа (зеленый) для открытых магазинов

Это не будет иметь никаких ограничений. Стиль образец будет выглядеть следующим образом:

[ //default 
    {"polygonOptions":{"fillColor":"#919191", 
         "fillOpacity":0.5} 
    }, 
    //open 
    {"polygonOptions":{"fillColor":"#00ff00"}, 
    "where":"'name' IN ('names','of','open','stores')"}, 
    //closed 
    {"polygonOptions":{"fillColor":"#ff0000"}, 
    "where":"'name' IN ('names','of','closed','stores')"} 
    ] 

Демо: http://jsfiddle.net/doktormolle/4h2S5/