Plot Marker on Map which are apart from 30 km - google-maps-api-3

Question

I am very new to Google Map API v3. I have referred google developer's guide on this but i didn't get proper conclusion on this.
I have list of addresses.
I want to send those as one(source) - Many addresses(Destination) to the google map and i want to plot the addresses which are 30 km apart from the source address on the map.
Is there any possible way to achieve this with google map??
Can any one be suggested on this..

Answer 1

One of the things you're looking for is the computeDistanceBetween() function in the geometry library (reference). This gives you the distance in meters between two LatLng objects. With that you can do whatever test you need - not clear if you meant "less than 30km" or "more than 30km" or "about 30km". But given a way to calculate the distance you can do whatever test you need as you loop through your markers.
Here's an example. Suppose you have some data like this - could be from a JSON object, or whatever:
var data = {
source: { lat: n, lng: n },
places: [
{ lat: n, lng: n, name: str },
{ lat: n, lng: n, name: str },
...
]
};
After you initialize your map, you could use some code like this to loop through data.places and create only the markers that meet your distance criterion. In this example we'll create markers that are within 30km of the source:
var sourceLatLng =
new google.maps.LatLng( data.source.lat, data.source.lng );
for( var i = 0; i < data.places.length; ++i ) {
addPlace( data.places[i] );
}
function addPlace( place ) {
var placeLatLng = new google.maps.LatLng( place.lat, place.lng );
var distance =
google.maps.geometry.spherical.computeDistanceBetween(
placeLatLng,
sourceLatLng
);
if( distance > 30000 )
return;
var marker = new google.maps.Marker({
map: map,
position: placeLatLng
});
}
You need to make sure to load the geometry library, by adding the libraries=geometry parameter when you load the Maps API, e.g.:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=geometry">
</script>