O X do Xamarin Forms — Mapas… Mas com Google maps :D

Image for post
Image for post

Fala galera,

Na minha humilde opinião o calcanhar de aquiles do Xamarin.Forms é o mapa. Não que não funcione, eu só não acho que não funciona bem :P . Ainda mais para criar pins customizados por exemplo.

Mas se você não quer ter que ficar configurando custom renderers e passando raiva…

Hoje vou mostrar outra forma de usar Mapas no Forms, inclusive com o google maps!

Isso é possível graças ao Plugin Xamarin.Forms.GoogleMaps (Inclusive leiam no repositório oficial a motivação de quem fez, e vão entender o que escrevi acima ehheheheh)

Olhando a comparação do Plugin vs o Componente padrão temos :

Image for post
Image for post

Acho que não preciso escrever mais nada do porque não é?

Vamos baixar o pacote Xamarin.Forms.GoogleMaps no nuget e instalar em todas as plataformas

Image for post
Image for post

Certo, agora vamos realizar as configurações por plataforma.

No iOS:

Antes de mais nada você precisa obter uma chave para utilizar o googlemaps no IOS. Se não sabe como fazer isso clique aqui.

Duas chaves precisam ser adicionados para o Info. plist arquivo: NSLocationAlwaysUsageDescription e NSLocationWhenInUseUsageDescription

Image for post
Image for post

Em seguida devemos alterar o arquivo AppDelegate.cs e adicionar o Xamarin.FormsGoogleMaps.Init(“Sua chave do google maps”) com a chave gerada.

No Android:

Assim como no IOS você precisa obter uma chave para utilizar o Google maps no Android. Caso não saiba como, clique aqui.

Agora precisamos colocar a chave no arquivo AndroidManifest.xml

Image for post
Image for post

Agora precisamos habilitar as opções no projeto:

Image for post
Image for post

Basicamente habilite :

· AccessCoarseLocation

· AccessFineLocation

· AccessLocationExtraCommands

· AccessMockLocation

· AccessNetworkState

· AccessWifiState

· Internet

Agora devemos inicializar o componente adicionando a linha Xamarin.FormsGoogleMaps.Init(this, bundle) na MainActivity.cs

Certo! Agora vamos brincar!

Implementando os Mapas

Vamos criar um mapa simples para começar. Vamos criar um MainPage.xaml e adicionar o controle do mapa. Temos que incluir o Namespace : xmlns:maps=”clr-namespace:Xamarin.Forms.GoogleMaps;assembly=Xamarin.Forms.GoogleMaps”

Pronto.. Serio? SIm! só com isso seu mapa ja esta funcionando :

Image for post
Image for post

Agora, vamos brincar com nosso mapa :D.

Antes de mais nada queria deixar uma dica, é muito melhor brincar com mapas pelo seu aparelho, devido a localização.

Se quiser testar no Emulador do iOS, basta alterar a localização em :

iOS Simulator -> Debug -> Location -> Custom Location. Assim é possivel simular com a localização que desejar.

No Emulador do Android :

Image for post
Image for post

Dito, isto continuemos.

Vamos melhorar a configuração do nosso Mapa.

Ao incluir as linhas :

Image for post
Image for post

Em nosso back-end, podemos habilitar a possibilidade de mostrar onde esta o usuário e o botão para o mesmo retornar a sua posição.

Image for post
Image for post

É possível , habilitar informações do transito , satélite e etc.

A mas e os pins? É simples também ! Vamos criar em nosso back-end 2 pins, e direcionar nosso mapa para o Japão (curti isso no exemplo deles, porque japão é ❤ ).

Após criarmos nossos pins , basta adicionarmos ao mapa. Como no exemplo acima.

O Método MoveToRegion, move a câmera (isso mesmo, câmera do mapa!!!!) para a localização desejada :

Image for post
Image for post

Podemos inclusive customizar nosso pin, para adicionar qualquer imagem :

Image for post
Image for post

Muito louco esse plugin em?

Existem diversas funcionalidades que podemos fazer com o mapa. o criador do plugin fez um exemplo com todas elas :

Image for post
Image for post

Caso queira baixar basta clicar aqui.

Esse é um dos meus controles favoritos, então vale a pena o teste e vejam como Xamarin.Forms pode ter um bom mapa !

— — — — UPDATE PARA AS ULTIMAS Versões — — — —

Caso apareça o seguinte erro no iOS:

/Library/Frameworks/Xamarin.iOS.framework/Versions/Current/bin/mtouch @/Users/[Username]/Library/Caches/Xamarin/mtbs/builds/[Project Name]/cbb0fc12083c8534721238efa9db531f/obj/iPhoneSimulator/Debug/response-file.rsp "--gcc_flags=-ObjC -ObjC -ObjC -lc++ -lz" 
error : warning: directory not found for option '-FGMps-3.5.0/Maps/Frameworks'
error : warning: directory not found for option '-FGMps-3.5.0/Maps/Frameworks'
error : warning: directory not found for option '-FGMps-3.5.0/Base/Frameworks'
error : framework not found GoogleMaps
warning MT5215: References to 'System' might require additional -framework=XXX or -lXXX instructions to the native linker
warning MT5215: References to 'System' might require additional -framework=XXX or -lXXX instructions to the native linker
warning MT5215: References to 'System.Net.Security' might require additional -framework=XXX or -lXXX instructions to the native linker
warning MT5215: References to 'System' might require additional -framework=XXX or -lXXX instructions to the native linker
warning MT5215: References to 'System' might require additional -framework=XXX or -lXXX instructions to the native linker
error MT5201: Native linking failed. Please review the build log and the user flags provided to gcc: -ObjC -ObjC -ObjC -lc++ -lz
error MT5202: Native linking failed. Please review the build log.
warning : directory not found for option '-FGMps-3.5.0/Maps/Frameworks'
warning : directory not found for option '-FGMps-3.5.0/Maps/Frameworks'
warning : directory not found for option '-FGMps-3.5.0/Base/Frameworks'
error : linker command failed with exit code 1 (use -v to see invocation)

Voce pode solucionar adicionando o pacote Xamarin.Build.Download e configurando a versão do iOS para no minimo a 9

Issue do erro

— — — — — — — — — — -

Se quiserem podem baixar o exemplo utilizado clicado aqui.

Quer ver outros artigos sobre Xamarin ? Clique aqui.

Espero ter ajudado!

Aquele abraço!

Written by

Microsoft MVP,Gamer, Desenvolvedor e apaixonado por tecnologia!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store