google-mapsgoogle-places-apigoogle-fusion-tables

Replace Autocomplete API marker with infoWindow from Fusion Table


Background:

I have an agent contact database created in Fusion Tables, with attached geometry to highlight their territory. I was able to render those territories on Google Maps, as well as creating the infowindow when any of the territories is clicked. Decided to utilize the Autocomplete API for address searching as well, which works fine, as it zooms to the location and places a marker.

Question:

Given that I was able to retrieve the longitude and latitude of this marker, how would I be able to get the the values from different columns to add to my infowindow HTML.

Here is the part of the code that I am having trouble with:

marker.setPosition(place.geometry.location);

var location = place.geometry.location;
var lat = location.lat();
var lng = location.lng();

var layer = new google.maps.FusionTablesLayer({
    query: {
       select: 'geometry, Geographic Name, Agent Name, Agent Website, Agent Phone',
       from: TableId,
       where: 'ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + lat + ', ' + lng + '),1))'
    }
});

Any help will be very much appreciated.


Solution

  • Probably the best way would be to use the Google Visualization API, specifically the DataTable object to get Fusion Table data with a spatial query.

    Here is a simple sample JSbin. Here, I'm showing a simple FusionTableLayer representing Canadian provinces with suppressInfoWindows: true and clickable: false (so the layer is for display purposes only). There's also an Autocomplete widget, restricted to only Canadian places. When an address is entered, a Marker is created with information from the Geocoder. Most importantly, a spatial query is made to the Fusion Table using a small circle with radius of 50m and a center of the LatLng returned by the Geocoder for the address from the dropdown menu. The data returned from the table query (the name and abbreviation of province that the small circle is contained in) is then added to the InfoWindow anchored on the Marker. The pertinent code:

    var map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(55.038487,-99.517295),
        zoom: 4
    });
    
    var autocomplete = new google.maps.places.Autocomplete(document.getElementById('address'),{
        placeIdOnly: true
    });
    autocomplete.setComponentRestrictions({'country': ['ca']});
    
    var geocoder = new google.maps.Geocoder();
    
    var infoWindow = new google.maps.InfoWindow();
    
    var marker = new google.maps.Marker({
        map: map
    });
    
    autocomplete.addListener('place_changed', function(event) {
      infoWindow.close();
      var place = autocomplete.getPlace();
      if (!place.place_id) {
        return;
      }
      geocoder.geocode({'placeId': place.place_id}, function(results, status) {
        if (status !== 'OK') {
          window.alert('Geocoder failed due to: ' + status);
          return;
        }
    
        marker.setPlace({
            placeId: place.place_id,
            location: results[0].geometry.location
        });
        marker.setVisible(true);
        var content = "<b>Address:</b> " + results[0].formatted_address + "<br>";
    
        var query = "SELECT 'Place' as place, 'Description'  as description " +
          "FROM 1GK_AefKlsiBzyufbFDuRqvF9RZTdJOUXqnIiCaO9 " +
          "WHERE ST_INTERSECTS(geometry, " +
          "CIRCLE(LATLNG(" + results[0].geometry.location.toUrlValue() + "), 50))";
    
        var queryText = encodeURIComponent(query);
        var gvizQuery = new google.visualization.Query(
          'http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
    
        gvizQuery.send(function(response) {
          var table = response.getDataTable();
          content += "<b>Name (Fusion Table):</b> " + table.getValue(0,0) +
            "<br/><b>Desc (Fusion Table):</b> " + table.getValue(0,1);
          infoWindow.setContent(content);
          infoWindow.open(map, marker);
        });
      });
    });