谷歌融合地圖 - 從谷歌融合表查詢動態菜單

Question

我很確定，我知道我的代碼是什麼問題，但我不確定如何解決它。

我有一個谷歌融合表，我查詢生成一個菜單，其中有單選按鈕。 Google地圖可視化的Google地圖也位於該頁面上。

當我硬編碼一個單選按鈕並單擊它們時，它會根據元素的ID在地圖上亮起來。我使用google.maps.event.addDomListener來完成這項神奇的工作。所以這很好。

現在我想更進一步，實際上從谷歌融合表中提取數據，以便顯示我在表格中的最新項目列表。所以，我使用jQuery和$ .get命令來獲取jsonp中的feed。我輸出2列數據，並通過將它們附加到innerHTML行來動態構建單選按鈕 - 將它附加到div。

所以，我想這個問題與DOM有關，但我不知道如何讓單選按鈕先加載然後加載到地圖中，這樣所有對地圖事件都是可用的，收音機實際上做了些什麼。

問題是我需要做些什麼修改，所以我的動態生成的單選按鈕將與我的谷歌融合地圖一起工作？

這裏是我的javascript代碼：

function initialize() { 
    var table = ########; 


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

    var layer = new google.maps.FusionTablesLayer(); 
    filterMap(layer, table, map); 

    getData(table); 

    google.maps.event.addDomListener(document.getElementById('num1'), 
     'click', function() { 
      filterMap(layer, table, map); 

    }); 

    google.maps.event.addDomListener(document.getElementById('num2'), 
     'click', function() { 
      filterMap(layer, table, map); 

    }); 

    } 


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

    if (where) { 
     if (!layer.getMap()) { 
     layer.setMap(map); 
     } 
     layer.setOptions({ 
     query: { 
      select: "State", 
      from: table, 
      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 bugs = document.getElementsByName('bug'); 
    for (var i = 0, bug; bug = bugs[i]; i++) { 
     if (bug.checked) { 
     var BugName = bug.value.replace(/'/g, '\\\''); 
     filter.push("'" + BugName + "'"); 
     } 
    } 
    var where = ''; 
    if (filter.length) { 
     where = "'BugName' IN (" + filter.join(',') + ')'; 
    } 
    return where; 
    } 


    // build the menu  
    function getData(table) { 
var queryUrlHead = 'http://www.google.com/fusiontables/api/query?sql='; 
    var queryUrlTail = '&jsonCallback=?'; // ? could be a function name 

    // write your SQL as normal, then encode it 
    var query = "SELECT BugName, bugAbbr FROM " + table + " LIMIT 1"; 
    var queryurl = encodeURI(queryUrlHead + query + queryUrlTail); 

    var jqxhr = $.get(queryurl, dataHandler, "jsonp"); 
    } 

    function dataHandler(d) { 
    // get the actual data out of the JSON object 
    var data = d.table.rows; 

var ftdata = ['<div>']; 

for (var i = 0; i < data.length; i++) { 
    ftdata.push('<input type="radio" id="'+data[i][1]+'" value="'+data[i][0]+'" name="bug">'+data[i][0]+''); 
} 

ftdata.push('</div>'); 
    document.getElementById('ft-data').innerHTML = ftdata.join(''); 
    } 


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

Answer 1

這個網站有一大堆的示例代碼。 http://csessig.wordpress.com/category/fusion-tables/