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…”.
Digite “Xamarin.Forms.Maps” e selecione o plugin como demonstrado na imagem a seguir.
Selecione todos os projetos e clique no botão “Install”.
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="utf-8" ?> | |
| <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" | |
| xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" | |
| xmlns:local="clr-namespace:DemoMaps" | |
| xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps" | |
| x:Class="DemoMaps.MainPage"> | |
| <maps:Map x:Name="Mapa" MapType="Street" | |
| VerticalOptions="FillAndExpand" | |
| IsShowingUser="true"> | |
| </maps:Map> | |
| </ContentPage> |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| using Xamarin.Forms; | |
| using Xamarin.Forms.Maps; | |
| namespace DemoMaps | |
| { | |
| public partial class MainPage : ContentPage | |
| { | |
| public MainPage() | |
| { | |
| InitializeComponent(); | |
| Mapa.MoveToRegion(MapSpan.FromCenterAndRadius( | |
| new Position(–23.4859591, –47.4420192), | |
| Distance.FromMiles(0.5))); | |
| var pin = new Pin | |
| { | |
| Type = PinType.Place, | |
| Position = new Position(–23.4859591, –47.4420192), | |
| Label = "Demo Maps", | |
| Address = "http://www.julianocustodio.com", | |
| }; | |
| Mapa.Pins.Add(pin); | |
| } | |
| } | |
| } |
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.
No Android Manifest selecione as seguintes permissões.
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.
Copie a API KEY gerada.
Edite o arquivo AndroidManifest.xml e dentro de application, adicione uma meta-data com a API KEY gerada, como demonstrado a seguir.
AndroidManifest
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="utf-8"?> | |
| <manifest xmlns:android="http://schemas.android.com/apk/res/android" android:installLocation="internalOnly"> | |
| <uses-sdk android:minSdkVersion="15" /> | |
| <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> | |
| <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> | |
| <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> | |
| <uses-permission android:name="android.permission.ACCESS_MOCK_LOCATION" /> | |
| <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> | |
| <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> | |
| <application android:label="DemoMaps.Android"> | |
| <meta-data android:name="com.google.android.geo.API_KEY" android:value="COLE SUA API KEY AQUI" /> | |
| </application> | |
| </manifest> |
iOS
No projeto .iOS edite o arquivo Info.plist e adicione as seguintes permissões dentro de “dict” como demonstrado a seguir.
Info.plist
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| … | |
| <key>NSLocationUsageDescription</key> | |
| <string>Esse aplicativo precisa acessar a sua localização.</string> | |
| <key>NSLocationAlwaysUsageDescription</key> | |
| <string>Esse aplicativo precisa acessar a sua localização.</string> | |
| <key>NSLocationWhenInUseUsageDescription</key> | |
| <string>Esse aplicativo precisa acessar a sua localização.</string> | |
| </dict> | |
| </plist> |
AppDelegate.cs
Em FinishedLaunching adicione Xamarin.FormsMaps.Init(); como demonstrado a seguir.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| … | |
| public override bool FinishedLaunching(UIApplication app, NSDictionary options) | |
| { | |
| Xamarin.FormsMaps.Init(); | |
| global::Xamarin.Forms.Forms.Init(); | |
| LoadApplication(new App()); | |
| return base.FinishedLaunching(app, options); | |
| } | |
| … |
Resultado
Android
iOS
Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.
Juliano Custódio 
Q massa!!! Vlw mesmo….
CurtirCurtir
😀
CurtirCurtir
Muito bom! Parabéns!
CurtirCurtido por 1 pessoa
Obrigado 🙂
CurtirCurtir
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;
CurtirCurtir
Olá Martinho,
Tem como sim, em relação a atualizar, você precisará criar uma task para atualizar a sua localização de acordo com o tempo que necessita.
E em relação ao trajeto, segue um link para te auxiliar a definir o ponto de partida e o da ultima localização. https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/custom-renderer/map/polyline-map-overlay/
CurtirCurtir
Parabéns pelo post, estou utilizando Xamarin no meu TCC e teus post estão me ajudando bastante, bem simples e didático. Obrigada por compartilhar o conhecimento.
CurtirCurtir
Olá Alessandra,
Que bom que estão te ajudando.
Obrigado pelo feedback 🙂
CurtirCurtir
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?
CurtirCurtir
Olá Alessandra, acredito que isso não seja possível, já que essa configuração segue o padrão do Google Maps.
CurtirCurtir
Que pena =/ obrigada pelo retorno.
CurtirCurtir
Muito massa! Chegou em boa hora!
CurtirCurtir
Obrigado Sérgio 🙂
CurtirCurtir
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.
CurtirCurtir
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.
CurtirCurtir
Olha cara, ja faz um ano isso, eu tive o mesmo problema e resolvi ele cedendo as permissões pelo celular.
CurtirCurtir
Valeu men! Uma pergunta, tem algum poster que traça a rota gps no mapa? Para seguir passo a passo o movimento do usuário?
CurtirCurtir
Olá Hugo,
No momento não, da uma olhada nesse post aqui, acho que vai te ajudar.
Abraço.
Ver no Medium.com
CurtirCurtir
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.
CurtirCurtir
Olá Hugo, acho que esse plugin resolve o seu problema: https://github.com/jamesmontemagno/GeolocatorPlugin
Dê uma olhada nessa parte da documentação: https://jamesmontemagno.github.io/GeolocatorPlugin/LocationChanges.html
Espero ter ajudado 🙂
CurtirCurtir
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.
CurtirCurtir
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. 🙂
CurtirCurtir
Boa tarde.
É possível colocar uma imagem e pegar o endereço completo?
Obrigado.
CurtirCurtir
Boa tarde,
Colocar uma imagem no pin ?
Caso seja isso, dê uma olhada nesse link: https://docs.microsoft.com/pt-br/xamarin/xamarin-forms/app-fundamentals/custom-renderer/map/customized-pin
E para pegar o endereço você vai precisar de um serviço externo eu acredito, pois pelo plugin é possível pegar a Latitude e Longitude.
CurtirCurtir
Boa noite, meu mapa não aparece na tela. É carregado todos os botões mas o mapa não aparece.
CurtirCurtir
Olá Danilo, tudo bem?
Você teria esse projeto em algum repositório para que eu possa dar uma olhada e tentar te ajudar ?
CurtirCurtir
Boa tarde Juliano,
Excelente, os seus posts tem me ajudado bastante, sempre simples e objetivo.
Valeu.
CurtirCurtir
Boa tarde Anderson,
Fico feliz em saber disso 🙂
Abraço.
CurtirCurtir
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.
CurtirCurtir
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)
CurtirCurtir
Boa tarde estou tendo o mesmo problema, poderia explicar em detalhes como você resolveu?
CurtirCurtir