In a previous article, I talked about how to show a route based on two location points and simulate tracking. This time I will be extending that sample to support searching places so that we can specify the origin and destination for our route, for that will use Google Place API.
The result will look like this:
Let’s code
Before we start, if you haven’t read the previous article, I recommend you to check it out, because in the first steps I explain how to integrate Google Maps, create a service and consume it. Knowing that we can get started:
1-Integrate the Google Place API.
To get places will be using two endpoints:
- api/place/autocomplete (More info): this endpoint gets a list of places based on a text query.
- api/place/details (More info): this endpoint gets the place details based on a PlaceId obtained using the previous endpoint.
With this will implement an autocomplete which will show a list of places based on the text query, then get the place details when tapping in a specific place of the list.
Let’s define an interface to consume this API service.
In the GetPlaces method will pass as parameter the text query typed by the user. The method returns a GooglePlaceAutoCompleteResult. (Copy code here).
In the GetPlaceDetails method, will pass the PlaceId and it returns a GooglePlace. (Copy code here).
Now let’s implement the IGoogleMapsApiService to consume the Google Maps Place API.
2-Create a ViewModel to call the GoogleMapsApiService
In the ViewModel, we will have two methods to consume each endpoint and handle the place search logic.
To handle the origin and destination we will use two string properties bound to each entry so that each time one changes will do the GetPlaces request and populate the list of the places to show the results.
3-Add a Search in the Map Page
In our actual map page, we will add a view to search place, when tapping on it will navigate to a new page called SearchPlacePage in which we will search for places to set our route.
Also, will add a Stop button, so that when it is tracking will show it and hide the search view. When tapping on this button it will stop the tracking, hide this button and make the search view visible again.
NOTE: If you don’t want to graph and track the route is not necessary to use the CalculateCommand and UpdateCommand.
4-Add the search place AutoComplete UI
As shown at the GIF at the beginning of this post, we will have two entries, one to specify the Origin and another one for the Destination.
Also, will have ListView to show the place search results.
In the code behind, will add a Command property called FocusOriginCommand that will focus the destination entry. It will be called from the ViewModel after origin place is set.
That’s it!
I will be publishing more content about using google maps in Xamarin Forms (How to add a CSS, how to choose a pickup point, how to handle a re-routing logic, etc), so keep in touch :).
You can check the full source code here.
Happy place searching!