Fusion table query : zoom on a marker from an external link

问题

I'm trying to create links from a text to a marker in a google fusion map. More precisely, I want the map to refresh and zoom on the location selected.

A picture will be easier to understand: http://projeteurope.free.fr/ For example, if you click on "Akrame" on the right side of the page, the map should zoom on the point (which already exist in the fusion table, and is 19 Rue Lauriston, 75016 Paris)

I've look at different topics and websites, but I don't understand how to do that (I'm a total beginner in javascript) Fusion Table + Google Maps or http://alamatku.com/cari?query=UPS&area=jakarta or Google Fusion Tables With Maps - Link Table field to Map Info Window

I just want the map to zoom on a specific market, not to create a new layer with only the marker.

Many thanks if you have any clues! Robin

回答1:

You can use GViz (the google visualization library) to query the fusion table and zoom the map in on the marker.

CODE:

function changeQuery(term) {
  layer.setOptions({query:{select:'Latitude', /* was 'Latitude,Longitude', used to work... */
                           from:FT_TableID,
                           where:"Nom contains "+term
                           }

 });

  // zoom and center map on query results
  //set the query using the parameter
  var queryText = encodeURIComponent("SELECT 'Latitude', 'Longitude' FROM "+FT_TableID+" WHERE 'Nom' contains '"+term+"'");
  var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);

  //set the callback function
  query.send(zoomTo);
}

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

  var bounds = new google.maps.LatLngBounds();
  for(i = 0; i < numRows; i++) {
      var point = new google.maps.LatLng(
          parseFloat(response.getDataTable().getValue(i, 0)),
          parseFloat(response.getDataTable().getValue(i, 1)));
      bounds.extend(point);
  }
  // zoom to the bounds, if you have only one result, 
  // you may want to do a map.setCenter; map.setZoom to specify the behavior
  map.fitBounds(bounds);
}

example/proof of concept

来源：https://stackoverflow.com/questions/14490535/fusion-table-query-zoom-on-a-marker-from-an-external-link

标签

javascript

google-maps

google-fusion-tables