與谷歌的融合表

Question

側邊欄對我的生活打開信息窗口，我不能讓這個地圖上的側邊欄的鏈接可以點擊打開信息窗口：http://web.redding.com/static/redd/asphalt/prod/xmas-lights-2014-complex.html

這裏的融合表：https://www.google.com/fusiontables/DataSource?docid=1WrvKdTypAmZozAIVeOw4vBX2g1hPInyVyuqn8GUM

它看起來像這樣的（CSV）：

Location,Description,Photo,Winner,Name 
"1101 Twin View Boulevard, Redding CA",Redding's finest media organization with decades of experience & class.,http://mediaassets.redding.com/photo/2014/03/15/youthcamp17b-01_3471502_ver1.0.jpg,,The Record Searchlight 
"1500 Court Street, Redding CA",Shasta Courthouse,,, 
"777 Cypress Avenue, Redding CA",City Hall,,, 

所有我想要做的是能點擊側邊欄的鏈接，並有相關的信息窗口在地圖上開放。

我是新來的JavaScript，所以我不會感到驚訝，如果有什麼明顯的我忽略。

代碼從鏈接的頁面：

function createSidebar() { 
    //set the query using the parameter 
    var query = new google.visualization.Query(queryText); 
    var queryText = encodeURIComponent("SELECT 'Name','Description' FROM 1uQLxgNdNR_etBFP8O_0YNDA38PqyZB3NidIJfsgX"); 
    var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText); 
    //set the callback function 
    query.send(getData); 
} 

function myFTclick(row) { 
    var Name = FTresponse.getDataTable().getValue(row,0); 
    var Description = FTresponse.getDataTable().getValue(row,1); 
    var Location = FTresponse.getDataTable().getValue(row,2); 
    var Photo = FTresponse.getDataTable().getValue(row,5); 
    var Winner = FTresponse.getDataTable().getValue(row,7); 
    var position = new google.maps.LatLng(lat, lng); 
    // Set up and create the infowindow 
    if (!infoWindow) infoWindow = new google.maps.InfoWindow({}); 
    var content = '<div class="FT_infowindow">' + name; 
    if (Description) content += '<br>'+Description; 
    if (Location) content += '<br>'+Location; 
    if (Photo) content += '<br>'+Photo; 
     if (extraContent) content += "<br>["+extraContent+"]"; 
    content += '<br>'+'<a href="javascript:map.setCenter(new google.maps.LatLng'+position+');map.setZoom(map.getZoom()+1);">zoom in</a>'; 
    content += '</div>'; 
    infoWindow.setOptions({ 
     content: content, 
     pixelOffset: null, 
     position: position 
    }); 
    // Infowindow-opening event handler 
    infoWindow.open(map); 
} 
var FTresponse = null; 
//define callback function, this is called when the results are returned 
function getData(response) { 
if (!response) { 
    alert('no response'); 
    return; 
} 
if (response.isError()) { 
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
    return; 
} 
    FTresponse = response; 
    //for more information on the response object, see the documentation 
    //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse 
    numRows = response.getDataTable().getNumberOfRows(); 
    numCols = response.getDataTable().getNumberOfColumns(); 

    //concatenate the results into a string, you can build a table here 
    fusiontabledata = "<table><tr>"; 
    fusiontabledata += "<th>" + response.getDataTable().getColumnLabel(1) + "</th>"; 
    fusiontabledata += "</tr><tr>"; 

    for(i = 0; i < numRows; i++) { 
     fusiontabledata += "<td><a href='javascript:myFTclick("+i+")'>"+response.getDataTable().getValue(i, 1) + "</a></td>"; 
    fusiontabledata += "</tr><tr>"; 
    } 
    fusiontabledata += "</table>" 
    //display the results on the page 
    document.getElementById('sidebar').innerHTML = fusiontabledata; 
} 

Answer 1

你在你的代碼中的JavaScript錯誤，看看JavaScript控制檯：Uncaught Error: Invalid column index 2. Should be an integer in the range [0-1].

你的查詢只包括從表中兩列：

var queryText = encodeURIComponent("SELECT 'Name','Description' FROM 1uQLxgNdNR_etBFP8O_0YNDA38PqyZB3NidIJfsgX"); 

這意味着你不能得到任何超過0和1的列，所以這將不會工作：

function myFTclick(row) { 
    var Name = FTresponse.getDataTable().getValue(row,0); 
    var Description = FTresponse.getDataTable().getValue(row,1); 
    var Location = FTresponse.getDataTable().getValue(row,2); 
    var Photo = FTresponse.getDataTable().getValue(row,5); 
    var Winner = FTresponse.getDataTable().getValue(row,7); 

您需要包括那些在查詢：

var queryText = encodeURIComponent("SELECT 'Name','Description','Location','Photo','Winner' FROM 1uQLxgNdNR_etBFP8O_0YNDA38PqyZB3NidIJfsgX"); 

然後訪問它們的順序：

function myFTclick(row) { 
    var Name = FTresponse.getDataTable().getValue(row,0); 
    var Description = FTresponse.getDataTable().getValue(row,1); 
    var Location = FTresponse.getDataTable().getValue(row,2); 
    var Photo = FTresponse.getDataTable().getValue(row,3); 
    var Winner = FTresponse.getDataTable().getValue(row,4);