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

32 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

  5. Olá boa tarde Juliano.
    O meu mapa também não aparece na tela.
    Todos os botões são carregados, junto com a logo da Google, mas fica um fundo “pardo”, o mapa não aparece.
    Obrigado, os seus posts tem me ajudado muito! Grande abraço.

    Curtir

    1. Desculpe, era a API que não estava corretamente habilitada. Agora funcionando perfeitamente. Muito obrigado.

      Estou com problemas na hora de passar as coordenadas (lat e lng), pois as pego do DB SQLite…. estao no formato string (Lat: -23.4859591 e Lng: -47.4420192), mas passo no código convertendo para Double. O mapa não abre na coordenada indicada.

      (O mapa abre no atlântico, mas não leva para as coordenadas)

      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