Adicione pontos no Maps – Xamarin.Forms

Olá, neste post irei demonstrar como você pode adicionar pontos (pins) no maps através de cliques do usuário em aplicações Xamarin.Forms.

Com esses pontos você poderá pegar as coordenadas (Latitude x Longitude) do ponto selecionado pelo usuário.

ADICIONANDO NUGET PACKAGES

Clique com o botão direito em cima de sua Solution e selecione “Manage NuGet Packages for Solution…”.

1

 

Digite “Xamarin.Forms.Maps” e selecione o plugin como demonstrado na imagem a seguir.

2

 

Selecione todos os projetos e clique no botão “Install”.

2

 

 

Após a instalação do Xamarin.Forms.Maps será necessãrio a instalaçao do pacote GooglePlayServices.Maps apenas para o projeto .Android.

Digite “Xamarin.GooglePlayServices.Maps” e selecione o plugin como demonstrado na imagem a seguir.

3-android

 

Selecione apenas o projeto .Android e clique no botão “Install”.

4

Adicionando permissões

Android

Edite o manifesto para adicionar algumas permissões, para isso clique com o botão direito no projeto .android e selecione Properties.

p1

 

No Android Manifest selecione as seguintes permissões.

manifesto2

 

O passo seguinte é obter uma chave de API do Google API Console e adiciona-la em nosso manifesto. Para isso acesse https://developers.google.com/maps/documentation/android-api/ com uma conta Google.

Selecione “OBTER UMA CHAVE” e em seguida defina um nome para o seu projeto, selecione Yes e clique em CREATE AND ENABLE API.

2

Copie a API KEY gerada.

3

Edite o arquivo AndroidManifest.xml e dentro de application, adicione uma meta-data com a API KEY gerada, como demonstrado a seguir.

ANDROIDMANIFEST

iOS

No projeto .iOS edite o arquivo Info.plist e adicione as seguintes permissões dentro de “dict” como demonstrado a seguir.

 

Portable

Em seu projeto portable crie a classe “ExtendedMap.cs”.
Observe que a classe ExtendedMap está herdando de Xamarin.Forms.Maps.Map.
Crie também a classe TapEventArgs que herda de System.EventArgs.

Dentro de ExtendedMap crie um EventHandler de TapEventArgs chamado Tap e os métodos “OnTap” como demonstrado a seguir.

Android

Em seu projeto android crie a classe “ExtendedMapRenderer.cs”.
Observe que a classe herda de MapRenderer e sobrescreve os métodos: OnMapReady, OnElementChanged. Por último crie o método googleMap_MapClick que será responsável por pegar o click do usuário.

 

iOS

Em seu projeto iOS também crie a classe “ExtendedMapRenderer.cs” herdando de MapRenderer como demonstrado a seguir.

Xaml

No arquivo xaml crie um ExtendedMap.

CODE-BEHIND

No construtor utilize o MoveToRegion para definir qual a região do mapa que deseja mostrar ao carregar a pagina.

Crie também o método Mapa_OnTap que será responsável por adicionar o pin na lista de pins do maps.

Resultado

ezgif.com-gif-maker (1)

 

Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.

icongithub

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s