Note that there are some explanatory texts on larger screens.

plurals
  1. POReturn 3 closest locations to a users location (geolocation) and list those locations for them
    text
    copied!<h2>Background:</h2> <p>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.</p> <h2>Question:</h2> <p>I have been able to successfully...</p> <ul> <li>Find the users location and put a marker there (using Map API/geolocation)</li> <li>Return 3 out of 5 locations and put markers down for those 3 (I used Fusion Tables &amp; limited results to 3)</li> </ul> <p>I want to be able to…</p> <ol> <li>Return only the <strong>3 closest locations</strong> to the user (i.e. calculate distance from users location to nearest water park)</li> <li>Put a "sidebar" or <strong>list of those 3 locations</strong>, detailing name, address, and other fields in my Fusion Table</li> </ol> <p>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.</p> <pre><code>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 &lt; 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) }; }; </code></pre> <p><strong><a href="http://jsfiddle.net/jamez14/bRLaH/2/" rel="nofollow noreferrer">http://jsfiddle.net/jamez14/bRLaH/2/</a></strong></p> <p>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!</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload