Plot Points within a Radius using Google Maps

Question

I have a Database with set of specific addresses, I want to use Google Maps API to search within a radius all the addresses which fall in and use markers for them.

The data i am getting from PHP would be like this:

<tr>
    <td><?php echo $row['firstName']; echo " "; echo $row['lastName'] ?></td>
    <td><?php echo $row['location'];?></td>
    <td><?php echo $row['city'];?></td>
    <td><?php echo $row['state'];?></td>
    <td><?php echo $row['zipcode'];?></td>
    <td><?php echo $row['phoneNumber'];?></td>
</tr>

I am creating latitude/longitude from the address using:

<!-- Snippet to convert Address to Geo code using Google APIs Starts -->
<?php
    $completeAddress = $row['address1'].",".$row['city'].",".$row['state'].",".$row['zipcode'];
    $httpGetCallUrl = "http://maps.googleapis.com/maps/api/geocode/json?address=" . urlencode($completeAddress) . "&sensor=false";
    $curlObject = curl_init();
    curl_setopt($curlObject, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($curlObject, CURLOPT_URL, $httpGetCallUrl);
    $resultGeocodeJson = curl_exec($curlObject);
    $json = json_decode($resultGeocodeJson, true);
    $volunteerLat = $json['results'][0]['geometry']['location']['lat'];
    $volunteerLng = $json['results'][0]['geometry']['location']['lng'];
    curl_close($curlObject);
?>

However, i am not able to add the feature to search by radius and plot the markers within that radius.

Code to add markers is :

function getMarkers() {
    var contentString = "<?php echo $row['firstName'];?>" + " " + "<?php echo $row['lastName'];?>";
    var myLatlng = new google.maps.LatLng(<?php echo $volunteerLat;?>, <?php echo $volunteerLng;?>);
    //Map Marker Object initialization
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map
    });
    //Adding map marker content
    var infowindow = new google.maps.InfoWindow({
        content:  contentString
    });
    //Event listner for map marker
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}

Answer 1

Suppose you have already the coordinates of the address entered by user (you can achieve that with google.maps.Geocoder ) and the radius.

Having this you can use the computeDistanceBetween method from google.maps.geometry.spherical library to know the distance between the address entered by the user and your others positions (markers).

For the following example code I assume the positions from database are already loaded and the markes had been generated and stored in the markers array. And the LatLng for the address entered by the user has been calculated and is stored in the address variable, so is the radius in the radius variable.

// markers already bound to the map.
var markers;
// LatLng calculated with Geocoder from the address entered by the user.
var address;
// radius (in meters) entered by the user.
var radius;

function MarkerIsInCircle(marker){
    var position = marker.getPosition(),
        // distance in meters between the marker and the address
        distance = google.maps.geometry
                        .spherical.computeDistanceBetween(position, address);

        return radius >= distance;  
}
function UpdateMarkersVisibility(){

    for(var i=0; i < markers.length; i++){
        // show the markers in the circle. Hide the markers out the circle.
        markers[i].setVisible(MarkerIsInCircle(markers[i]));
    }
}

You have to call the UpdateMarkersVisibility method when the user click in the search button and you have finished to calculate the LatLng for the address he entered.

NOTE: This code has not been tested but should work fine and achieve what your want to.