Categories
Programación

Xamarin Maps

Xamarin Forms Tutorial for Google Maps API

This tutorial is to integrate Search API in a Xamarin.Forms.Maps but you can use any other API that you want.

First I am going to explain the project idea using this representation.

Xamarin Forms Google Places API

We are going to use a Model in our Xamarin Form app that will do a Query on the Google Place API and bring back a single location.

I am using this example because it is free but you can adjust your model to the Paid Google Place API to find Nearby or Textsearch.

Then in our Xamarin Forms app, we will have a service that will return a Result Model to pass that data to the ViewModel and present a map with a single pin.

Since I don’t have a Mac to test I will only center my attention on Android during testing.

Let’s Start

Install this NUGET¿s packages first.

Newtonsoft.Json on your Forms Project

Xamarin.Forms.Maps on your Forms Project

Xamarin.GooglePlayServices.Maps on your Android Project

Xamarin.Google.iOS.Maps on your iOS Project

On Android, we are going to ask the user for permission to find it’s the location so we need to change the MainActivity.cs and on iOS the same on Info.Plist read this.

Your Android Manifest needs to have the Key for your Google Maps API you can search online how to get one, that is the easy part.

Now let’s go to our Forms project and create a Services Folder, this is where we are goint to put the Maps Service and the interface.

And our MapsService will look like this, you need to add your place API Key there.

Now create a Model folder, this will contain to models, one for the request query and one for the result. This is according to the API information found here.

So our model will have basically the Name that will be the search name, the Input Type that is a query, the Fields (I’m using some but you can use all the basic one, including photos without cost) and locationbias to find close to my location.

Now the resulting Model. For this, we need first to use postman and Quicktype.io remember to put your key there to get a Status 200 OK

Now we get a result and paste the result on Quicktype.io

And we create our new class SearchResultModel.cs

The ViewModel MVVM Pattern

On our ViewModel, we are goint to pass the SearchModel data to the Service that will go to the API and request a Json string. That will parse to an Object using the quictype.io class and present the data to the user and add a pin to the map.

And that is all, run your APP and test using a mockup location in your Android Emulator.

Xamarin Forms Search API Google

If you want you can test using my GIT repository. But remember to put your KEYS on the Manifest and the Service. If you read till this part please Rate this post.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *