I am using the Google Maps JavaScript API. As an alternative to the map view, I am providing a "list" view of the locations (by locations I mean markers):
var locloc = [];
var testContent;
var marker, i;
for (i = 0; i < locations.length; i++) {
// UPDATE THE LIST OF LOCATIONS SECTION
locloc.push({
lat: locations[i][5],
lng: locations[i][6]
});
testContent += '<div style="clear:both;height:200px;">'
+ locations[i][0] + '<br>'
+ locations[i][5] + ',' + locations[i][6]
+ '</div>';
document.getElementById("search_results").innerHTML = testContent;
var icon_image;
icon_image = 'https://maps.gstatic.com/mapfiles/ms2/micons/subway.png';
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][5], locations[i][6]),
animation: google.maps.Animation.DROP,
icon: icon_image,
map: map
});
"List of Locations" section code:
<div id="locations_list">
<h3>List of Locations</h3>
<div id="search_results"></div>
</div>
In addition, I have a search box allowing to search by address:
<input type="text" name="address" id="address" class="address" placeholder="Where are you coming from?" />
I would like to have the user search an address and then update the "List of Locations" section with the locations sorted by the distance (closest first) from the search address.
How can I calculate the distance to each marker and output it into the List of Locations section using the Google Maps JavaScript API?