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

<?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.

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.

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

<?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>

view raw
ManifestDemoMaps.xml
hosted with ❤ by GitHub

 

 

iOS

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

Info.plist

<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>

view raw
Info.plist
hosted with ❤ by GitHub

 

 

AppDelegate.cs

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

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
Xamarin.FormsMaps.Init();
global::Xamarin.Forms.Forms.Init();
LoadApplication(new App());
return base.FinishedLaunching(app, options);
}

view raw
AppDelegate.cs
hosted with ❤ by GitHub

 

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

    2. Olha cara, ja faz um ano isso, eu tive o mesmo problema e resolvi ele cedendo as permissões pelo celular.

      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 uma resposta para Martinho André - Angola Cancelar resposta

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