How to make a form which searches an item around a specific radius using google maps API?

Question

I am working on a website in which I want to make a circle on google map either around current location or some manual address.

• Users will have option to decid

Answer 1

Let's try to give you some first steps, I would no code the whole app, but rather give you some guide lines in to how to solve the small subproblems that you have:

Adding a circle in a map

Well, for this you have many different options for input, but the most important part is the addCircle function:

function addCircle(center){
    circle = new google.maps.Circle({
        map: map, //The existing map
        center: center,
        radius: 200, //This will be modified afterwards
        zindex: 100
    });
}

The center could come from a click for example:

// Area is wherever you want to attach the click, either a polygon, a map...
google.maps.event.addListener(area, "click", function(event) {
        addCircle(event.latLng);
});

OR by getting the position of a certain address (This is documented as well), OR whatever method (drag and drop the circle, drag the marker blablabla)

Adding a dynamic radius

Well, if we know that the radius of the Circle is given in meters, then is very easy to give the addCircle function the correct radius. For example, 20km -> 20 000 meters. So you just have to be able to access radius when calling addCircle (it can be an argument, a global variable... your choice).

We are done with the drawing part, lets now search within that circle.

Getting only the markers inside the circle

There is a prerequisite here, to have all the markers of your map. You may have an array of places that you get from a database or maybe you get the markers from Google Maps API (Place search for example).

After that you will have to compute the distance between those markers and your given center, and check if the distance is smaller than your radius (with computeDistanceBetween is very easy), so you will know which markers are valid for you.

const markers = [//array of my valid markers with position];
markers.filter( (marker) => 
    google.maps.geometry.spherical.computeDistanceBetween(marker.getPosition(), center.getPosition()) < radius; // Filter the markers which distance is bigger than radius;

The rest of the job should be as easy, place the markers in the map and do whatever you like with this information.

EXTRAS

As a further help there are a pair of examples/answers that may be useful for you:

Full Google Map API example, very easy step by step guide.

Radius search using places, a good answer in to how to do radius search.

Example of radius search, open F12 and debug the code if you like, but it is easy to follow.

EDIT**: I did not realize that 2 of these link where also pointed out in the comments.