使用Google Fusion Tables中的查詢API

我一直在使用Google Spreadsheets和Fusion Tables來創建地圖，但我想要做一些涉及更多代碼的事情，並希望您能幫助完善我的方法。使用Google Fusion Tables中的查詢API

從本質上講，我用電子表格刮GP和來自英國的NHS本地網站化驗數據，並用數據融合表進行地理編碼它（https://www.google.com/fusiontables/DataSource?docid=1xmT0D6H6JjRlXVyetubasugqQMswJqKNH7nrKh4）。

我現在要做的就是使用Google Maps API發佈Fusion Table數據，但是隨後添加控件以便用戶可以過濾掉他們不想要的位。我知道如何創建自定義按鈕，但我無法解決的是如何在單擊按鈕時創建查詢。

這是一個非常有用的東西，所以如果你能提供幫助，那將會很棒。

我的努力到目前爲止都低於：

http://davidelks.com/MashupTests/gmapsTest.html

<script type="text/javascript"> 
    var map, infoWindow; 
    var toggle_doctors = 'false'; 
    var toggle_chemists = 'false'; 

    $(document).ready(function(){ 
     infoWindow = new google.maps.InfoWindow({}); 
     map = new GMaps({ 
      div: '#map', 
      lat: 53.023098, 
      lng: -2.197793, 
      zoom: 11 
     }); 

     var doctors = map.addControl({ 
      position: 'left_bottom', 
      text: 'GPs', 
      style: { 
      margin: '1px', 
      padding: '1px 6px', 
      border: 'solid 1px #717B87', 
      width: '85px', 
      background: '#99ff99' 
      }, 
      events: { 
       click: function(){ 

        if (toggle_doctors == 'true'){ 
         toggle_doctors = 'false'; 
         doctors.style.backgroundColor = '#ffffff'; 

        } 
        else { 
         toggle_doctors = 'true'; 
         doctors.style.backgroundColor ='#99ff99'; 

        } 

       } 
      } 
     }); 

     var chemists = map.addControl({ 
      position: 'left_bottom', 
      text: 'Late chemists', 
      style: { 
      margin: '1px', 
      width: '85px', 
      padding: '1px 6px', 
      border: 'solid 1px #717B87', 
      background: '#9999ff' 
      }, 
      events: { 
       // toggle button between white and colour 
       click: function(){ 

        if (toggle_chemists == 'true'){ 
         toggle_chemists = 'false'; 
         chemists.style.backgroundColor = '#ffffff'; 


        } 
        else { 
         toggle_chemists = 'true'; 
         chemists.style.backgroundColor ='#9999ff'; 

        } 

       } 
      } 
     }); 

     map.loadFromFusionTables({ 
      query: { 

      select: '*', 
      from: '1xmT0D6H6JjRlXVyetubasugqQMswJqKNH7nrKh4', 
      where: 'TYPE == \'GP\'' 
      }, 

      events: { 
       click: function(point){ 

       infoWindow.setPosition(point.latLng); 
       infoWindow.open(map.map); 
       } 
      } 
     }); 



    });//end of code block 


</script> 
<div id="map" style="height: 500px; width: 300px; border: 1px;"></div>

來源

2012-07-06 elksie5000