Maps – Xamarin.Forms

Olá, neste post irei demonstrar como apresentar um mapa através de uma determinada localização (Latitude X Longitude) em sua aplicação Xamarin.Forms.

Para este exemplo irei assumir que você acabou de criar uma aplicação Xamarin.Forms, caso possua alguma dúvida sobre isso recomendo ler o post Criando um projeto Xamarin.Forms.

ATENÇÃO
Caso você queira que sua aplicação acesse o GPS para obter a Latitude X Longitude do dispositivo, recomendo a leitura do post Utilizando o GPS – Xamarin.Forms antes de realizar a demo a seguir.

O primeiro passo após a sua aplicação ter sido criada é adicionar o Nuget Package Xamarin.Forms.Maps

ADICIONANDO O NUGET PACKAGE

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

1 - nuget

 

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

1

 

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

1

 

 

Após a instalação do NuGet Package, crie um Map no Xaml referenciando o Name Space “Xamarin.Forms.Maps” como demonstrado a seguir.

Xaml

CODE-BEHIND

Defina a área que será demonstrada no mapa através de Latitude X Longitude e também a proximidade em milhas.

Em seguida, crie quantos pontos desejar, também utilizando Latitude X Longitude e adicione na lista de Pins.

Observações: Os pontos precisam estar próximos da Latitude X Longitude usada para definir a região.

Configurações da plataforma

É necessário realizar algumas configurações de acordo com cada plataforma, para definir permissões e etc…

 

Android

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

manifest-android

 

 

No Android Manifest selecione as seguintes permissões.

manifesto2

 

O último passo é 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.

Info.plist

 

 

AppDelegate.cs

Em FinishedLaunching adicione Xamarin.FormsMaps.Init(); como demonstrado a seguir.

 

Resultado

Android

screenshot-1506614345217

 

 

iOS

2017-09-26_06-25-23-

 

 

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

icongithub

29 comentários em “Maps – Xamarin.Forms

  1. Muito bom meus parabéns; Tem como actualizar por cada minuto a minha actual posição em caso de movimentar mostra o trajecto percorrido. Um ponto de partida e um da ultima posição;

    Curtir

  2. Uma duvida, é possível configurar que os marcadores já venham por padrão exibido as informações da “label” e “address” sem ter que o usuário clicar um por um? Se sim, como posso fazer?

    Curtir

    1. Olá Alessandra, acredito que isso não seja possível, já que essa configuração segue o padrão do Google Maps.

      Curtir

  3. Cara, eu fiz do modo que você falou. No Manifest do Android tem as permissões ACCESS_COARSE_LOCATION e ACCESS_FINE_LOCATION configuradas mas a aplicação quebra informando que precisa dessas permissões. Quando a aplicação roda, o sistema não pede para liberar as permissões.

    Curtir

    1. Olá Sérgio,

      As demais permissões também estão no Manifest ? Experimente editar o manifest e verificar se está equivalente ao código demonstrado no post.
      Quando for editar o arquivo do manifest, certifique-se que ele não esteja aberto pelo properties.
      Após editar, experimente dar um clean no projeto.

      Espero ter ajudado, qualquer dúvida estou a disposição.

      Curtir

      1. Muito bom, já tinha visto ele, porém ele somente traça a rota da origem até destino, porém não acompanhar a posição do dispositivo até o destino como podemos ter como exemplo o app do google map. Ainda espero um dia ver algum poster sobre isso. Valeu mesmo assim.

        Curtir

  4. Boa tarde Juliano, primeiramente parabéns pelo post, está muito bom! … Eu gostaria de saber também se tens algum material pra indicar sobre como acrescentar botões à tela que tem o mapa? Eu queria acrescentar mais controles na tela porque o mapa toma a tela inteira.

    Curtir

    1. Olá José,

      Obrigado pelo feedback. 🙂

      Neste exemplo eu utilizei o mapa na tela inteira, porém, você pode deixa-lo do tamanho que quiser.

      Coloque-o dentro de um StackLayout e adicione os botões que desejar.

      Espero ter ajudado. 🙂

      Curtir

    1. Olá Danilo, tudo bem?

      Você teria esse projeto em algum repositório para que eu possa dar uma olhada e tentar te ajudar ?

      Curtir

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 )

Foto do Google+

Você está comentando utilizando sua conta Google+. 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 )

Conectando a %s