带侧边栏的融合表

Question

我不确定我在做什么错，但我无法让我的标记或边栏显示出来。我不确定我缺少什么部分，或者我是否在语法中关闭。如果你能帮助，我会很感激。

<!-- language: lang-js --> 

google.load('visualization', '1', {'packages':['table']}); 
var map; 
var markers = []; 
var infoWindow = new google.maps.InfoWindow(); 

function initialize() { 
var ak = new google.maps.LatLng(64.958056,-147.618333); 

map = new google.maps.Map(document.getElementById('map_canvas'), { 
center: ak, 
zoom: 9, 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var sql = encodeURIComponent("SELECT name, lat, lng, description FROM 1zFwXiOkWbKCY9xRGvXBdHjUkTsirnwbr77WjTds ORDER BY NAME"); 
var query = new google.visualization.Query('https://www.googleapis.com/fusiontables/v1/query?sql=' + sql); 

query.send(getData); 
} 

function getData(response) { 
var dt = response.getDataTable(); 

var side_html = '<table style="border-collapse: collapse" border="1" \ 
        cellpadding="5"> \ 
        <thead> \ 
        <tr style="background-color:#e0e0e0"> \ 
         <th>City</th> \ 
        </tr> \ 
        </thead> \ 
        <tbody>'; 

for (var i = 0; i < dt.getNumberOfRows(); i++) { 
    var lat = dt.getValue(i,1); 
    var lng = dt.getValue(i,2); 
    var name = dt.getValue(i,0); 
    var description = dt.getValue(i,3); 

var pt = new google.maps.LatLng(lat, lng); 

var html = "<strong>" + name + "</strong><br />"; 

    side_html += '<tr> \ 
        <td><a href="javascript:myclick(' + i + ')">' + name + '</a></td> \ 
       </tr>'; 


    createMarker(pt, html); 

} 

side_html += '</tbody> \ 
      </table>'; 
document.getElementById("side_bar").innerHTML = side_html; 
} 


function createMarker(point,info) { 
var iconURL = 'uaf-icon.png';    var iconSize = new google.maps.Size(29,60); 
var iconOrigin = new google.maps.Point(0,0); var iconAnchor = new google.maps.Point(15,60); 

var myIcon = new google.maps.MarkerImage(iconURL, iconSize, iconOrigin, iconAnchor); 

var shadowURL = 'uaf-shadow.png';   var shadowSize = new google.maps.Size(63, 60); 
var shadowOrigin = new google.maps.Point(0, 0); var shadowAnchor = new google.maps.Point(15, 60); 

var myShadow = new google.maps.MarkerImage(shadowURL, shadowSize, shadowOrigin, shadowAnchor); 

var iconShape = [18,0,20,1,22,2,23,3,24,4,25,5,26,6,27,7,27,8,28,9,28,10,28,11,28,12,28,13,28,14,28,15,28,16,28,17,28,18,28,19,27,20,27,21,26,22,26,23,25,24,24,25,23,26,21,27,20,28,16,29,21,31,21,32,21,33,21,34,21,35,20,36,20,37,20,38,19,39,19,40,19,41,18,42,18,43,18,44,18,45,17,46,17,47,17,48,17,49,16,50,16,51,16,52,15,53,15,54,15,55,14,56,14,57,14,58,14,59,13,59,13,58,13,57,13,56,12,55,12,54,12,53,12,52,11,51,11,50,11,49,11,48,11,47,10,46,10,45,10,44,10,43,9,42,9,41,9,40,9,39,9,38,8,37,8,36,8,35,8,34,8,33,7,32,7,31,12,29,9,28,7,27,6,26,4,25,3,24,3,23,2,22,1,21,1,20,0,19,0,18,0,17,0,16,0,15,0,14,0,13,0,12,0,11,0,10,1,9,1,8,2,7,2,6,3,5,4,4,5,3,6,2,8,1,10,0,18,0]; 
var myMarkerShape = { 
    coord: iconShape, 
    type: 'poly' 
}; 

var myMarkerOpts = { 
    position: point, 
    map: map, 
    icon: myIcon, 
    shadow: myShadow, 
    shape: myMarkerShape 
}; 

var marker = new google.maps.Marker(myMarkerOpts); 

markers.push(marker); 

google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.close(); 
    infoWindow.setContent(info); 
    infoWindow.open(map,marker); 
}); 
} 

function myclick(num) { 
google.maps.event.trigger(markers[num], "click"); 
} 

Answer 1

您的查询无效： “选择名称，纬度，经度，说明从1zFwXiOkWbKCY9xRGvXBdHjUkTsirnwbr77WjTds ORDER BY NAME”

应该是： “选择名称，纬度，经度，说明从1zFwXiOkWbKCY9xRGvXBdHjUkTsirnwbr77WjTds ORDER BY名“ （”名称“列的名称是小写字母，ORDER BY采用列名称）。

您需要决定是否要使用Fusion Table API v1.0或可视化API（AKA GViz），它看起来您的代码是使用GViz编写的，但是您将查询发送到v1 API 。

这个工作对我来说：

var queryStr = "SELECT name, lat, lng, description FROM 1zFwXiOkWbKCY9xRGvXBdHjUkTsirnwbr77WjTds ORDER BY name"; 
var queryText = encodeURIComponent(queryStr); 
    var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText); 

并添加错误检查，以响应处理，可以让你看到正在发生的事情（这是超时）：

function getData(response) { 
if (!response) { 
    alert('no response'); 
    return; 
} 
if (response.isError()) { 
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
    return; 
} 
var dt = response.getDataTable(); 

working example