You may find a situation where you need to create a google map and google place autocomplete and limit your service to 5KM radius from a specific address like 5KM around Miami we offer our service, let's learn how we can achieve this
Radius
We'll be using react-google-autocomplete to show autosuggest address while you type, but we need google-place api to get it to work. now create a radius and check if the address contain inside that radius or not.
import Autocomplete from "react-google-autocomplete";
const onPlaceSelectedHandler = (place) => {
const newAddress = {
lat: place.geometry.location.lat(),
lng: place.geometry.location.lng(),
};
// create center point; Miami
const center = new window.google.maps.LatLng(25.4844904, -80.4616389);
// user selected address
const to = new window.google.maps.LatLng(
place.geometry.location.lat(),
place.geometry.location.lng()
);
// now check the distance between two address, is it inside 50Miles
const contains =
window.google.maps.geometry.spherical.computeDistanceBetween(
center,
to
) <= 8046.72; // meters it's 5Miles
if (contains) { console.log('go ahead how can we help you') }
else { console.log('Sorry we do not offer our service yet') }
}
return (
<Autocomplete
apiKey={process.env.REACT_APP_MAP_API}
className={classes.autocomplete}
onPlaceSelected={onPlaceSelected}
componentRestrictions={{ country: "us" }}
options={{
types: ["geocode", "establishment"],
}}
/>
)
computeDistanceBetween(from, to) each argument need latitude and longitude, provide the lat and lng of center and the selected address lat and lng it will return the distance between two point in meters now you make a condition if the retuned meter is less than your 8046.72 (5KM). that's it
Polygon
this is how you can create polygon, you need to collect the lat and lng from all the points and then check it the user selected address contains inside that polygon.
const onPlaceSelectedHandler = (place) => {
const newAddress = {
lat: place.geometry.location.lat(),
lng: place.geometry.location.lng(),
};
var polygonCoords = [
{ lat: -33.83585327701507, lng: 151.2809005901216 },
{ lat: -33.73335715102409, lng: 150.8744770943904 },
{ lat: -33.82163832733159, lng: 150.8404448193081 },
{ lat: -33.9974469167501, lng: 151.247420749521 },
{ lat: -33.83585327701507, lng: 151.2809005901216 },
];
var polygon = new window.google.maps.Polygon({
paths: polygonCoords,
});
const contains = window.google.maps.geometry.poly.containsLocation(
new window.google.maps.LatLng(newAddress.lat, newAddress.lng),
polygon
);
if (contains) { console.log('go ahead how can we help you') }
else { console.log('Sorry we do not offer our service yet') }
}
return (
<Autocomplete
apiKey={process.env.REACT_APP_MAP_API}
className={classes.autocomplete}
onPlaceSelected={onPlaceSelected}
componentRestrictions={{ country: "us" }}
options={{
types: ["geocode", "establishment"],
}}
/>
)
Thank you for making it to here.
I hope it helped, helpful links:
1) http://jsfiddle.net/5wrejxnm/
2) http://jsfiddle.net/qy7yr/
3) https://developers.google.com/maps/documentation/javascript/reference/geometry#spherical.computeDistanceBetween
4) https://stackoverflow.com/questions/46762911/how-to-use-computedistancebetween
5) https://stackoverflow.com/questions/36640449/google-maps-api-a-lat-is-not-a-function-error
Polygon
6) http://jsfiddle.net/mrummler/x942cyg6/
7) https://developers.google.com/maps/documentation/javascript/examples/polygon-simple
8) https://jsfiddle.net/geocodezip/yqLvjf8z/2/
9) https://jsfiddle.net/iselwin/pcduogka/
10) https://stackblitz.com/edit/react-gvavr9?file=Map.js
Top comments (0)