Background:

I am working on a website/app built with HTML/CSS/Javascript that will use geolocation (Google Maps API) to find a users location (geolocation) and return them, for example, the top 5 closest water parks to them at that location they are currently at so they will be able to then navigate to one of those locations. I am using Google Fusion Tables to return the results to them.

Question:

I have been able to successfully...

• Find the users location and put a marker there (using Map API/geolocation)
• Return 3 out of 5 locations and put markers down for those 3 (I used Fusion Tables & limited results to 3)

I want to be able to…

1. Return only the 3 closest locations to the user (i.e. calculate distance from users location to nearest water park)
2. Put a "sidebar" or list of those 3 locations, detailing name, address, and other fields in my Fusion Table

I made a Fiddle below this code with what I have so far. The code below is my Fusion Table query, which I assume is what I will need to make the changes to in order to get the 3 closest locations (question #1). Question #2, listing those locations, might use all of the code I have in my Fiddle.

var base_query = {
    select: 'Location',
    from: '1MsmdOvWLKNNrtKnmoEf2djCc3Rp_gYmueN4FGnc',
    limit: 3
};

var ftLayer = new google.maps.FusionTablesLayer({
    map: map,
    query: $.extend({}, base_query)
});

var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < base_query.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(base_query[i][1], base_query[i][2]),
        map: map
    });

    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            infowindow.setContent(base_query[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
};

var signChange = function () {
    var options = {
        query: $.extend({}, base_query)
    };
};

/

Any help would be appreciated. I have been doing research on this question for some time, but for whatever reason I am not able to piece it all together. Any help/resources would be greatly appreciated!

Background:

I am working on a website/app built with HTML/CSS/Javascript that will use geolocation (Google Maps API) to find a users location (geolocation) and return them, for example, the top 5 closest water parks to them at that location they are currently at so they will be able to then navigate to one of those locations. I am using Google Fusion Tables to return the results to them.

Question:

I have been able to successfully...

• Find the users location and put a marker there (using Map API/geolocation)
• Return 3 out of 5 locations and put markers down for those 3 (I used Fusion Tables & limited results to 3)

I want to be able to…

1. Return only the 3 closest locations to the user (i.e. calculate distance from users location to nearest water park)
2. Put a "sidebar" or list of those 3 locations, detailing name, address, and other fields in my Fusion Table

I made a Fiddle below this code with what I have so far. The code below is my Fusion Table query, which I assume is what I will need to make the changes to in order to get the 3 closest locations (question #1). Question #2, listing those locations, might use all of the code I have in my Fiddle.

var base_query = {
    select: 'Location',
    from: '1MsmdOvWLKNNrtKnmoEf2djCc3Rp_gYmueN4FGnc',
    limit: 3
};

var ftLayer = new google.maps.FusionTablesLayer({
    map: map,
    query: $.extend({}, base_query)
});

var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < base_query.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(base_query[i][1], base_query[i][2]),
        map: map
    });

    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            infowindow.setContent(base_query[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
};

var signChange = function () {
    var options = {
        query: $.extend({}, base_query)
    };
};

http://jsfiddle/jamez14/bRLaH/2/

Any help would be appreciated. I have been doing research on this question for some time, but for whatever reason I am not able to piece it all together. Any help/resources would be greatly appreciated!

• javascript
• jquery
• google-maps-api-3
• geolocation
• google-fusion-tables

Share Improve this question Follow edited Jan 19, 2017 at 17:43 james asked Aug 18, 2013 at 17:02 jamesjames 5,2361010 gold badges4242 silver badges6868 bronze badges 6

• 1 You will need to query the FusionTable using either GViz or the Fusion Tables API v1.0 to retrieve the data to put in the sidebar. (example with sidebar using GViz. another example with sidebar using GViz) – geocodezip Commented Aug 18, 2013 at 20:30
• Awesome, thank you for this. I actually came across your site the other day, somehow I missed the most important examples. – james Commented Aug 18, 2013 at 23:46
• @geocodezip - do you happen to have any examples on your site that deal with calculating the distance from the users position to the nearest point(s) that get returned from my Fusion Tables and also write out the distance (i.e. 10 miles away, 20 miles away, etc.)? I assume it is a JSONP request. I have a Github project now if you want to view any code - (github./jamez14/TrailFinder) - thank you!! – james Commented Aug 27, 2013 at 0:23
• @geocodezip I was able to successfully get the 3 closest locations. Now I just need to get their distance/mileage away from the users location. If you happen to have time to help, that'd be great. I appreciate it!! – james Commented Aug 27, 2013 at 0:42
• 1 Like this example? – geocodezip Commented Aug 27, 2013 at 6:38

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 3

Related to 1. (2. has been answered in the ments by geocodezip)

Use a spatial_relationship in the orderBy-option of base_query.

orderBy: 'ST_DISTANCE(Coordinates, LATLNG(lat,lng))

...where lat and lng has to be populated with the values returned by navigator.geolocation(what means that you must create the layer or at least set the query for the layer in the callback of navigator.geolocation.getCurrentPosition)

You can use Google Places API.

Docs: https://developers.google./places/documentation/search

Supported location types: https://developers.google./places/documentation/supported_types

After you have recieved the users location, make a request like that with your location and relevant types:

https://maps.googleapis./maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key=AddYourOwnKeyHere

---

Here is a fiddle based on yours, without using fusion tables: http://jsfiddle/iambnz/M9KrK/

Add this to your libary call:

&libraries=places

Add this to your code:

Global var:

var service;

If statement when you found the users location:

var request = { location: pos, radius: '500', types: ['store'] };

service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);  

After maps init:

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      createMarker(results[i]);
    }
  }
}

   function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  }); 
}

I hope this points you in the right direction.

Example with sidebar + FT usage from @geocodezip: http://www.geocodezip./geoxml3_test/v3_FusionTables_Watershed_Stewards_Map_sidebar2.html