How to implement map search functionality in Ionic 5 app

Ionic Framework
1

I am trying to create an ionic app that has two types of users - customers & suppliers.

Use case example:
I sign in as a customer, & by default I can see all the suppliers within 5km’s of me on a map. I should then be able to select a supplier on the map, & contact them via the app.

Can someone please tell me if there are specific ionic plugins or other plugins that I can use in my ionic app to accomplish the above?

So far, I’ve found the following resources that may be helpful but I’m not 100% sure if they’re able to help with my requirement above:

https://github.com/ionic-team/ionic-native-google-maps/blob/d7898d7a58940a9eb478ee4a1ef5d3d431db9e25/documents/README.md

https://ionicframework.com/docs/native/geolocation

Thanks for reading this, & I appreciate any advice or feedback!

2

There isn’t one Plugin that archives all of what you want.

  • First you need the Google Maps Plugin to show a Map, Markers what ever.
  • Then you need of course a Plugin to get Users Position, as you want to show something related to this.

In our App we have a similar Usage, we use this Plugin for getting the Users Position. But it costs, as it is the only one that works also when App is in Background. So if you don’t need this, you can use the one you linked. Then we send the Position to our Backend and the Backend return some Locations in a specified Radius. For every Item you can create a Marker on the Map now and implement Stuff like clicking on a Marker opens a Modal with more specific Informations.

1 Like
3

Thanks for your response.

When a Supplier signs up to the app, they will be asked to provide an address. All this info will be stored in firebase.

When a customer logs into the app then, a map will display, showing their current location, & all Suppliers close by on the map.

How would you convert the Supplier’s into co-ordinates which could be placed on the map?

4

So what you want it transform a Adress to Lat/Lng Values. Googles Api for this is called Geocoding

1 Like
5

Google maps it’s not free, i suggest to use leaflet it’s completely free and fully customizable (i use this with my app on ionic 5).

6

Thanks for your suggestion. Is there any way you can use leaflet to display directions from one marker to another?