title: Loading the Markers inside the Radius
body: <p>I'm new to Google maps and I have problem on how should i start to get the marker around the given radius of the Address that is Centered on the <code>Initialize()</code></p>
  
  <pre><code>{
      &lt;script type="text/javascript"&gt;
          var geocoder, infoBubble, geocode;
          var map;
          var marker;
          //var mgr;
  
  
          function initialize() {
              var minZoomLevel = 4;
              var zooms = 7;
              geocoder = new google.maps.Geocoder();
              geocode = new google.maps.Geocoder();
  
              // Used to Set the Center of the Maps on the Logged User
              $.getJSON('/Dashboard/LoadAddress', function Geocoding(address) {
                  $.each(address, function () {
                      var currValAddress = this["AddressLine1"];
                      var Latitude = this["Latitude"];
                      var Longitude = this["Longitude"];
                      var LatLang = new google.maps.LatLng(Latitude, Longitude);
  
                      var addresse = {
                          zoom: 8,
                          center: LatLang,
                          mapTypeId: google.maps.MapTypeId.ROADMAP
                      };
                      map = new google.maps.Map(document.getElementById('map'), addresse);
  
  
                  // Bounds for North America
                  var strictBounds = new google.maps.LatLngBounds(
                        new google.maps.LatLng(15.70, -160.50),
                        new google.maps.LatLng(68.85, -55.90));
  
                  // Listen for the dragend event
                  google.maps.event.addListener(map, 'dragend', function () {
                      if (strictBounds.contains(map.getCenter())) return;
                      // We're out of bounds - Move the map back within the bounds
  
                      var c = map.getCenter(),
                        x = c.lng(),
                        y = c.lat(),
                        maxX = strictBounds.getNorthEast().lng(),
                        maxY = strictBounds.getNorthEast().lat(),
                        minX = strictBounds.getSouthWest().lng(),
                        minY = strictBounds.getSouthWest().lat();
  
                      if (x &lt; minX) x = minX;
                      if (x &gt; maxX) x = maxX;
                      if (y &lt; minY) y = minY;
                      if (y &gt; maxY) y = maxY;
  
                      map.setCenter(new google.maps.LatLng(y, x));
                  });
  
                  // Limit the zoom level
                  google.maps.event.addListener(map, 'zoom_changed', function () {
                      if (map.getZoom() &lt; minZoomLevel) map.setZoom(minZoomLevel);
                  });
              });
          });
  
          }
  
          var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
          function codeAddress() {
              infoBubble = new InfoBubble({
                  map: map,
                  shadowStyle: 0,
                  padding: 10,
                  borderRadius: 10,
                  arrowSize: 15,
                  maxWidth: 300,
                  borderWidth: 1,
                  borderColor: '#ccc',
                  arrowPosition: 50,
                  arrowStyle: 0
              });
              $.getJSON('/Dashboard/LoadWorkerList', function Geocode(addresses) {
                  $.each(addresses, function () {
                      var currVal = this["AddressLine1"];
                      var Name = this["Name"];
                      var Gender = this["Gender"];
                      var Bdate = this["Birthdate"];
                      var ID = this["Worker_ID"];
                      var Latitude = this["Latitude"];
                      var Longitude = this["Longitude"];
                      var LatLang = new google.maps.LatLng(Latitude, Longitude);
  
                       marker = new google.maps.Marker({
                          map: map,
                          icon: iconBase + 'man.png',
                          position: LatLang,
                          title: currVal
                      })
  
                      var link = $('&lt;a href="#"&gt;' + currVal + '&lt;/a&gt;')
                           .data('location', LatLang);
                      $('#places').each(function () {
                          $('#places').append($('&lt;li id=\'List\' class=\'List\'&gt;').append(link));
                      });
  
                      link.on('click', function (event) {
                          event.preventDefault();
                          google.maps.event.trigger(addresses[0], "click");
                          infoBubble.removeTab(0);
                          infoBubble.addTab(Name, "Name: " + Name + "&lt;br&gt; Address: " + currVal + "&lt;br&gt; Gender: " + Gender + "&lt;br&gt; Birthdate: " + Bdate + "&lt;br&gt;&lt;br&gt;" + '&lt;center&gt;&lt;a href="/Worker/WorkerDetails?workerId=' + ID + '"&gt;View Profile&lt;/a&gt;&lt;/center&gt;');
                          infoBubble.open(map, marker);
                      });
  
                      google.maps.event.addListener(map, 'idle', function () {
                          $('#places &gt; li').each(function () {
                              var inside = (map.getBounds().contains($(this).find('a').data('location'))) ? '' : 'none';
                              $(this).css('display', inside);
                          });
                      });
  
  
  
                      google.maps.event.addListener(marker, 'click', (function (marker, i) {
                          return function () {
                              infoBubble.removeTab(0);
                              infoBubble.addTab(Name, "Name: " + Name + "&lt;br&gt; Address: " + currVal + "&lt;br&gt; Gender: " + Gender + "&lt;br&gt; Birthdate: " + Bdate + "&lt;br&gt;&lt;br&gt;" + '&lt;center&gt;&lt;a href="/Worker/WorkerDetails?workerId=' + ID + '"&gt;View Profile&lt;/a&gt;&lt;/center&gt;');
                              infoBubble.open(map, marker);
                          }
                      })(marker, currVal));
                      addresses.push(marker);
  
                  })
                  google.maps.event.trigger(map, 'bounds_changed');
                  google.maps.event.addListener(map, 'click', find_closest_marker);
              })
          }
  
          window.onload = function () {
              initialize();
              codeAddress();
          }
  
      &lt;/script&gt;
  }
  </code></pre>
  
  <p>Now my question is if i add a Dropdown of Radius in miles. . how can i get distance between the initial point to the markers around it. . .and only load on the markers inside its radius like this site <a href="http://www.acehardware.com/mystore/storeLocator.jsp" rel="nofollow">here</a></p>