Monday, 30 July 2018

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

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 decide whether they want to make circle around current location or some random address they will provide. (Users would have the option to put manual address inside current location as shown below in an image)

  • Now we also need to make sure that circle is of particular radius (0-20/70km from the current location) as well and user needs to decide that as well. (The line beneath the current location will decide the radius which users can move here and there 0-70km)

For example: user want to create a circle from current location till 30KM or user want to create a circle from some random address till 20KM.

enter image description here

The HTML code which I have used in order to make a search bar for search radius is:

<div class="input-searchradius">
   <input class="form-control search_radius mb-4" type="text" placeholder="search radius">
</div>



Problem Statement:

(1) I am wondering what changes I need to make or code I need to add so that the items are being searched around a specific radius. I think, I need to integrate the code Google Maps circle but I am not sure how I can do that.

(2) On hit of search radius on the website the following options/screen will appear at the bottom:

enter image description here



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

No comments:

Post a Comment