Reputation: 1
I just managed to visualize markers from a Google Fusion Table on my Map. Now I would like to know the distance from a user specified point to those markes stored in the table. I thought of using the Distance Matrix for this. The code example from https://developers.google.com/maps/documentation/javascript/distancematrix works just fine for me, however, I have no clue how to define the markers from the table as destinations in my Distance Matrix function.
As mentioned above, I now need my variable which calls the markers from the Fusion Table as destination instead of destA and destB.
Here is my variable:
var schools = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '1mae334i-txYZFixePEiC7lgYYyi4w6qDN87XAyw'
},
});
Here is the basic code from the google documentation.
var origin1 = new google.maps.LatLng(55.930385, -3.118425);
var origin2 = "Greenwich, England";
var destinationA = "Stockholm, Sweden";
var destinationB = new google.maps.LatLng(50.087692, 14.421150);
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origins: [origin1, origin2],
destinations: [destinationA, destinationB],
travelMode: google.maps.TravelMode.DRIVING,
avoidHighways: false,
avoidTolls: false
}, callback);
function callback(response, status) {
}
I would be very happy if anyone could help me with this. I suppose there should be some pretty straight-forward solution to this, but I just don't get it :/
Anyway, thanks a lot for any kind of help!
Upvotes: 0
Views: 1830
Reputation: 161404
You need to query the FusionTable for the locations in there and use those in the query to the DistanceMatrix. As you have less than 500 rows in the table I would probably use the google visualization library, but the new JSONP API should work as well.
The DistanceMatrix is limited to 25 destinations. Proof of concept for your table with 94 rows, much more than that would be problematic (run into query limits and the quota)
http://www.geocodezip.com/v3_SO_FusionTables_DistanceMatrix.html
code to get the first 25 results:
// query the table for the destinations
var queryString ="SELECT 'geometry' FROM "+FT_TableID;
var queryText = encodeURIComponent(queryString);
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
//set the callback function
query.send(createDestinations);
}
function createDestinations(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 geoXml = new geoXML3.parser();
var bounds = new google.maps.LatLngBounds();
var request=0;
destinations[0] = [];
for (var i=0; ((i<numRows) && (i<25)); i++) {
var kml = FTresponse.getDataTable().getValue(i,0);
geoXml.parseKmlString("<Placemark>"+kml+"</Placemark>");
destinations[request].push(geoXml.docs[i].markers[0].getPosition());
bounds.extend(geoXml.docs[i].markers[0].getPosition());
}
map.fitBounds(bounds);
calculateDistances(0);
}
function calculateDistances(request) {
service.getDistanceMatrix({
origins: [origin],
destinations: destinations[request],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.IMPERIAL,
avoidHighways: false,
avoidTolls: false
}, function (response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
alert('Error was: ' + status);
} else {
var origins = response.originAddresses;
var destinationAdds = response.destinationAddresses;
htmlString = '<table border="1">';
deleteOverlays();
for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
for (var j = 0; j < results.length; j++) {
htmlString += '<tr><td>'+destinationAdds[j]+'</td><td>' + results[j].distance.text +'</td></tr>';
}
}
}
var outputDiv = document.getElementById('outputDiv');
htmlString += '</table>';
outputDiv.innerHTML = htmlString;
});
}
working example that gets the first 25 results
Upvotes: 3