Google Maps API v3 & fusion layers: get row data

Question

I'm trying to get a row id from a fusion table layer in google maps using geometry when a marker is placed on the map. This is my first attempt at using fusion layers and despite reading the docs and spending hours testing I'm now stumped.

If a user clicks on the map I can get the row["id"] no problem but if I programmatically place the marker using any other method (e.g. autocomplete.getPlace) I can't get the row id from the FusionLayer which is all I need. My code is below:

/* get row id if user clicks on the map */
google.maps.event.addListener(fusionLayer, "click", function(e) {
    document.getElementById("MY_HIDDEN_FIELD").value = e.row["id"].value;
    placeMarker(e.latLng, map);
});

function placeMarker(position, map) {
    addMarker(map,true,position);
    map.panTo(position);
    document.getElementById("latitude").value = position.lat();
    document.getElementById("longitude").value = position.lng();
}

function addMarker(map,draggable,position){
    deleteMarkers();
    if (infowindow) {
        infowindow.close();
    }
    draggable = typeof draggable !== "undefined" ? draggable : true;
    var icon = document.getElementById("map-icon").value;
    var marker = new google.maps.Marker({
        map: map,
        draggable: true,
        position: position,
        icon: icon
    });
    arr_markers.push(marker);
}

I've been messing about for hours trying to work this out. I've tried placing listeners on the fusionLayer on bounds_changed and center_changed as below but that doesn't work because e is not defined:

google.maps.event.addListener(fusionLayer, "center_changed", function(e) {
    document.getElementById("MY_HIDDEN_FIELD").value = e.row["id"].value;
    placeMarker(e.latLng, map);
});

Can anyone help point me in the right direction?

Many thanks

Answer 1

I don't think you can actually make programatical queries over a fusionTables layer. Instead, you use the wrapper to make google maps API query the fusionTable itself for you, and render the result on your map.

What you're trying to achieve should not rely on the rendered fusionTablesLayer object, but query the fusion table API directly. Derek Eder's Fusiontables Map Template uses a function like:

   // replace with your table ID
   var fusionTableId = "1FQeX0LbhOo7M6NH19xwHGB6sozCsL1GK4sngqiTy";     

   //*You need an API key. found at https://code.google.com/apis/console/
   var googleApiKey =  "[YOUR API KEY]";

   var queryStr = [];
   queryStr.push("SELECT * ");
   queryStr.push(" FROM " + fusionTableId);

   // replace with your geo field or fields accordingly, coordinates and tolerance radius
   // queryStr.push(" WHERE ST_INTERSECTS(geometry, CIRCLE(LATLNG(37.4, -122.1), 500))");

   var sql = encodeURIComponent(queryStr.join(" "));
   $.ajax({
      url: "https://www.googleapis.com/fusiontables/v1/query?sql="+sql+"&key="+googleApiKey,
      dataType: "json"
   }).done(function (response) {
      console.log(response);
   });

Disclaimer: I'm a humble contributor to Derek's project.

Caveats

• You'll need an API key, but it's free and worth the effort.
• You'll need to refine that queryStr to actually pinpoint your desired location.
• Even when asking for a precise coordinate pair, you might get more than one matching row, or none.
• I'm using jQuery because I need the ajax method, but that part is up to you.
• It might be overkill to query the table just to get the row_id but it's a cheap request after all.