CODEWITHSUNDEEP
reactjsgoogle-mapslocationmaps
Sagar Chavan
Sagar Chavan

Reputation: 259

How to get autocomplete address while typing and get coordinates

I want to show a UI like below enter image description here

and when user starts entering keywords I want to populate it with search results which when click on a particular name. map should get displayed with marker and I want to fetch the lat and long for that marker pointer.

Can I do it for free using google API for web as I am doing it in reactjs or is there any other good API

Upvotes: 0

Views: 961

Answers (1)

yahms23
yahms23

Reputation: 336

This is possible with Google's Places Autocomplete API for the dropdown, you can even narrow the search to a specific country. There's a npm package I've used that's very nice and relatively straightforward that you can integrate with your dropdown API calls, they have functions that allow for getting lat and long values of data in the dropdown list.

The map is a separate issue; I'd suggest passing your coordinates through your URL or via props to a child component after a user selects the location they want. In your map component (which will need Google Maps API or some other map like Mapbox integrated into the component), you would use these co-ordinates to define a marker (passed from props etc.). I would also suggest using Google API for the maps, as there are npm packages (discontinued but still works & a more recent package) that easily allow for you to plot custom markers as well as multiple markers.

Upvotes: 1

Related Questions