Google fusion tables 带边栏的融合表

我不确定我做错了什么，但我无法让我的标记或边栏显示出来。我不确定我遗漏了哪一部分，或者我是否只是在语法上偏离了方向。如果你能帮忙，我将非常感激

<!-- 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");
}

load（'visualization'，'1'，{'packages'：['table']}）；
var映射；
var标记=[]；
var infoWindow=new google.maps.infoWindow（）；
函数初始化（）{
var ak=new google.maps.LatLng（64.958056，-147.618333）；
map=new google.maps.map（document.getElementById（'map_canvas'）{
中心：ak，
缩放：9，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var sql=encodeURIComponent（“按名称从1zFwXiOkWbKCY9xRGvXBdHjUkTsirnwbr77WjTds订单中选择名称、lat、lng、说明”）；
var query=new google.visualization.query（'https://www.googleapis.com/fusiontables/v1/query?sql="sql",；
query.send（getData）；
}
函数getData（响应）{
var dt=response.getDataTable（）；
var side_html='1〕\
\
\
城市\
\
\
';
对于（var i=0；i”+name+”
”；
side_html+='\
\
';
createMarker（pt，html）；
}
side_html+='\
';
document.getElementById（“side\u bar”）.innerHTML=side\u html；
}
函数createMarker（点、信息）{
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={
协调人：iconShape，
类型：“poly”
};
var myMarkerOpts={
位置:点,，
地图：地图，
图标：我的图标，
阴影：我的阴影，
形状：myMarkerShape
};
var marker=新的google.maps.marker（myMarkerOpts）；
标记器。推（标记器）；
google.maps.event.addListener（标记'click'，函数（）{
infoWindow.close（）；
infoWindow.setContent（info）；
信息窗口。打开（地图、标记）；
});
}
函数myclick（num）{
google.maps.event.trigger（标记[num]，“单击”）；
}

您的查询无效： “按名称从1zFwXiOkWbKCY9xRGvXBdHjUkTsirnwbr77WjTds订单中选择名称、lat、lng、说明”

应该是： “按名称从1zFwXiOkWbKCY9xRGvXBdHjUkTsirnwbr77WjTds订单中选择名称、lat、lng、说明” （名称列的名称为小写，ORDER BY采用列名）

您需要决定是使用Fusion Table API v1.0还是可视化API（又名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);

将错误检查添加到响应处理中，可以让您看到发生了什么（超时）：

---

非常感谢，我对这一切都很陌生，而且一直在学习。我犯了一些愚蠢的错误，我想我不想使用可视化api。当我的自定义标记显示在地图上时，我是否需要做些其他事情来关闭红色标记？我看到了我制作的自定义标记和谷歌使用的红点标记。我显示了FusionTable在我的示例中使用esLayer，因为我没有您的自定义图标，如果您不想看到它，请不要显示它。如果这个答案对您有效，请。

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();