O X do Xamarin Forms — Mapas… Mas com Google maps :D
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 :
Acho que não preciso escrever mais nada do porque não é?
Configurando o Plugin
Vamos baixar o pacote Xamarin.Forms.GoogleMaps no nuget e instalar em todas as plataformas
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
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
Agora precisamos habilitar as opções no projeto:
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 :
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 :
Dito, isto continuemos.
Vamos melhorar a configuração do nosso Mapa.
Ao incluir as linhas :
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.
É 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 :
Podemos inclusive customizar nosso pin, para adicionar qualquer imagem :
Muito louco esse plugin em?
Existem diversas funcionalidades que podemos fazer com o mapa. o criador do plugin fez um exemplo com todas elas :
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
— — — — — — — — — — -
Se quiserem podem baixar o exemplo utilizado clicado aqui.
Quer ver outros artigos sobre Xamarin ? Clique aqui.
Espero ter ajudado!
Aquele abraço!
