Loading the Markers inside the Radius

Question

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 Initialize()

{
    <script type="text/javascript">
        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 < minX) x = minX;
                    if (x > maxX) x = maxX;
                    if (y < minY) y = minY;
                    if (y > 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() < 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 = $('<a href="#">' + currVal + '</a>')
                         .data('location', LatLang);
                    $('#places').each(function () {
                        $('#places').append($('<li id=\'List\' class=\'List\'>').append(link));
                    });

                    link.on('click', function (event) {
                        event.preventDefault();
                        google.maps.event.trigger(addresses[0], "click");
                        infoBubble.removeTab(0);
                        infoBubble.addTab(Name, "Name: " + Name + "<br> Address: " + currVal + "<br> Gender: " + Gender + "<br> Birthdate: " + Bdate + "<br><br>" + '<center><a href="/Worker/WorkerDetails?workerId=' + ID + '">View Profile</a></center>');
                        infoBubble.open(map, marker);
                    });

                    google.maps.event.addListener(map, 'idle', function () {
                        $('#places > 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 + "<br> Address: " + currVal + "<br> Gender: " + Gender + "<br> Birthdate: " + Bdate + "<br><br>" + '<center><a href="/Worker/WorkerDetails?workerId=' + ID + '">View Profile</a></center>');
                            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();
        }

    </script>
}

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 here

Answer 1

The basic principle is to draw a circle around the point. Extract the lat lng coordinates of the bounds object of this circle. Pass this to your database to return points within the object and then check whether or not those points are within the radius (using computeDistanceBetween).

Similar questions and relevant answers including code are available at these locations:

Finding all the markers inside a given radius

How do I know if a Lat,Lng point is contained within a circle?

Google Maps - Finding all the markers inside a given radius Javascript/Php