title: How to display closest location on google map from a list of locations based on lat and lng
body: <p>So I have list of latitudes and longitudes of bus stops that I passed from controller to view (javascript). </p>
  
  <p>We are able to display all bus stops on google map using their lat and lng. </p>
  
  <p>sample code:
  index.cshtml</p>
  
  <pre><code>&lt;script&gt;
  
  
  var x = document.getElementById("demo");
  
  function getLocation() {
      if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(showPosition);
      } else { 
          x.innerHTML = "Geolocation is not supported by this browser.";
      }
  }
  
  //get my current lat and lng
  function showPosition(position) {
      x.innerHTML = "Latitude: " + position.coords.latitude + 
      "&lt;br&gt;Longitude: " + position.coords.longitude;
  }
  
  var markersArray = [];
  
      @foreach (var item in ViewBag.stoplatLngList){
  
         &lt;text&gt;
  
               markersArray.push(new google.maps.Marker({
                   draggable: true,
                   position: new google.maps.LatLng('@item.stop_Lat', '@item.stop_Lng', false),
                   title: 'Whatever title',
                   map: map
               }));
          &lt;/text&gt;
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>we also have the user's current lat and lng. however, when we try to narrow the total list of bus stops to just ones within a specified range of the user's lat and lng. ideally we were considering an IF statement where we could subtract or use absolute value to establish the range within which we could get bus stops. however, we have been unsuccessful. </p>
  
  <p>basically, how can we narrow the complete list of bus stops just to ones within user's range?</p>
  
  <p>and just a little bit of my controller code</p>
  
  <p>controller.cs</p>
  
  <pre><code>List&lt;StopLatLng&gt; stoplatLngList = new List&lt;StopLatLng&gt;();
  ViewData["stoplatLngList"] = stoplatLngList;
  return View();
  </code></pre>