In a previous article, I talked about how to search for places using google map APIs. Will now extend it by allowing the user to move the map with a centralized pin marker over it to set the pickup location.

The result will look like this:

By using the CameraPosition.Target property, will detect the map center position to know which location user picked.

Let’s code

1-Add a method in the ViewModel that based on a position returns the place name  

To get the location name based on a position will use the Xamarin Essentials – Geocoding API.

Also, we will have an IsRouteNotRunning property to hide the location pickup when the map route is running.

Copy the full ViewModel code here.

2-Add a marker icon over the map and a button to the pickup location

In our XAML we will add a marker icon which will be placed in the center of the page, also a choose pickup location button. When tapping the button two things happen:

1- Calls GetLocationNameCommand passing the center map position, which is provided by CameraPosition.Target

2-Navigates to the SeachPlacePage.

3-Get user current location

Finally, we need to get the user current location to center the map in that position when the page is appearing.

To achieve that will use the Xamarin.Essentials – Geolocation API.

Copy the full code-behind class here.

That’s it!

Will keep publishing more content related to using Google Maps in Xamarin Forms (How to add a CSS to style map, handling a re-routing logic, etc), so keep in touch :).

You can check the full source code here.

Happy pickup!