带侧边栏的Fusion Tables和地图：从非洲地图示例中的数字ID到加密ID

Question

Thanks to all for helping me learn so far!

I've had to change my previous map based on client feedback, and I'm now attempting to recreate the following API v3 Example: Fusion Tables Layer example from @geocodezip:

http://www.geocodezip.com/v3_FusionTables_AfricaMap_kml_sidebar.html

I've carefully copied and pasted and changed the original code into my page, but I'm running into problems where:

a.) The infoWindows are not being suppressed, and new ones are not created;

b.) Clicking items in the sidebar has no effect on the map.

My guess is that it has something to do with the new query syntax and encrypted IDs, whereas the sample code (the Africa map) is based on numeric IDs. I think I've flubbed it up.

My question is: How can I change/update my code to make my map function like the Africa map example? Thank you!

My map: http://hepac.ca/map/

My Fusion Table: https://www.google.com/fusiontables/data?docid=1DxjRqzjtC7-Oryt8N9ZaJ0n1IXRllDjodnbEJYo

What I think is the relevant code:

function createSidebar() {
  // https://www.google.com/fusiontables/api/query?sql=SELECT%20ROWID,%20%2A%20FROM%20564705

  //set the query using the parameter
  var queryText = encodeURIComponent("http://www.google.com/fusiontables/gvizdata?tq=SELECT * FROM 1DxjRqzjtC7-Oryt8N9ZaJ0n1IXRllDjodnbEJYo");
  var query = new google.visualization.Query(queryText);
  var queryText = encodeURIComponent("SELECT 'Description', 'Network', 'Contact', 'Email', 'Latitude', 'Longitude' FROM 1DxjRqzjtC7-Oryt8N9ZaJ0n1IXRllDjodnbEJYo");
  var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);


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

}

And:

layer = new google.maps.FusionTablesLayer({
      query: {
        select: "col2",
        from: "1DxjRqzjtC7-Oryt8N9ZaJ0n1IXRllDjodnbEJYo",
        where: ""
      },
      suppressInfoWindows: true
    });  

  layer.setMap(map);

Answer 1

The infoWindows are being suppressed. There is a 'click' listener in your code that causes them to be displayed:

  google.maps.event.addListener(layer, "click", function(event) {
    infoWindow.close();
    infoWindow.setContent(event.infoWindowHtml);
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
  });

Answer 2

My Javascript errors seemed to be related to the number of columns I was calling from the Fusion Table. Made these fixes and it works OK:

var queryText = encodeURIComponent("SELECT 'Description', 'Network', 'Contact', 'Website', 'Email', 'Latitude', 'Longitude' FROM 1DxjRqzjtC7-Oryt8N9ZaJ0n1IXRllDjodnbEJYo");

and, later:

function myFTclick(row) {
   var Description = FTresponse.getDataTable().getValue(row,0);
   var Network = FTresponse.getDataTable().getValue(row,1);
   var Contact = FTresponse.getDataTable().getValue(row,3);
   var Email = FTresponse.getDataTable().getValue(row,4);
   var lat =  FTresponse.getDataTable().getValue(row,5);
   var lng =  FTresponse.getDataTable().getValue(row,6);
   var position = new google.maps.LatLng(lat, lng);

I was able to get it running by playing with the column values -- eg, .getValue(row, x) -- though I don't know how to find the correct numerical value for "x." I did it by trial and error.