在使用 Fusion 创建的地图中创建指向地图标记的链接 Table

Question

正在创建地图 like so（另请参阅 post 末尾的代码）。

我要创建的是指向地图上标记的链接列表，以便在跟踪链接时使地图重新居中并显示信息窗口。

This question and answer 以这种方式创建地图时，看起来好像无法检索标记数组，那么我还能如何制作链接列表？

    function initialize() {
google.maps.visualRefresh = true;
var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) ||
  (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
if (isMobile) {
  var viewport = document.querySelector("meta[name=viewport]");
  viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no');
}
var mapDiv = document.getElementById('googft-mapCanvas');
mapDiv.style.width = isMobile ? '100%' : '100%';
mapDiv.style.height = isMobile ? '100%' : '500px';
var map = new google.maps.Map(mapDiv, {
  center: new google.maps.LatLng(35.81916145578315, -83.53575989454339),
  zoom: 12,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open'));
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));

layer = new google.maps.FusionTablesLayer({
  map: map,
  heatmap: { enabled: false },
  query: {
    select: "col18",
    from: "1P-2dj7mmKzaTY_cB8IS0nqL3Ou7_jOq5nuiL5QfN",
    where: ""
  },
  options: {
    styleId: 2,
    templateId: 2
  }
});

if (isMobile) {
  var legend = document.getElementById('googft-legend');
  var legendOpenButton = document.getElementById('googft-legend-open');
  var legendCloseButton = document.getElementById('googft-legend-close');
  legend.style.display = 'none';
  legendOpenButton.style.display = 'block';
  legendCloseButton.style.display = 'block';
  legendOpenButton.onclick = function() {
    legend.style.display = 'block';
    legendOpenButton.style.display = 'none';
  }
  legendCloseButton.onclick = function() {
    legend.style.display = 'none';
    legendOpenButton.style.display = 'block';
  }
}
 }
  google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

FusionTables map with clickable sidebar

使用 google 可视化 API 查询 table 侧边栏（将条目数限制为几百个）

function  createSidebar() {

  //set the query using the parameter
  var queryText = encodeURIComponent("SELECT 'Name', 'Lat', 'Focus Area', 'Contact', 'Contact alt' FROM "+FT_TableID);
  var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);


  //set the callback function
  query.send(getData);

}

  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(createSidebar);

 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(0) + "</th>";
  fusiontabledata += "</tr><tr>";

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

proof of concept fiddle（侧边栏的信息窗口和原生的不一样）

在使用 Fusion 创建的地图中创建指向地图标记的链接 Table

Create links to map markers in map created with Fusion Table

javascript

google-maps

google-fusion-tables