0

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?

cpcdev
  • 1,130
  • 3
  • 18
  • 45
  • related question: [How to get Sorted alphabetical markers](http://stackoverflow.com/questions/35965047/how-to-get-sorted-alphabetical-markers) – geocodezip Jul 20 '16 at 19:48
  • related question: [Google Maps API Directions - Move directions link to sidebar](http://stackoverflow.com/questions/35642396/google-maps-api-directions-move-directions-link-to-sidebar) – geocodezip Jul 20 '16 at 19:48
  • You sir/mam, are a rockstar! @geocodezip – cpcdev Jul 20 '16 at 20:01
  • @geocodezip How can I pull the lat and lng inside the calculateDistances method used in the linked post? I am getting an error when trying to split "pt" to separate the lat and lng values. – cpcdev Jul 25 '16 at 21:12

0 Answers0