Google Maps fácil en Xamarin Forms
Como parte del Calendario de Adviento de Xamarin 2019, les traigo un pequeño tutorial de cómo implementar Google Maps en tus aplicaciones de Xamarin Forms. Los mapas nativos de cada plataforma son muy buenos y si has usado Xamarin.Forms Maps, notaras que cumplen con las mayoría de nuestras expectativas.Sin embargo, hay clientes que se sienten más confiados en que, visualmente hablando, el mapa “se vea igual” en ambas plataformas y que posea “lo mismo que Google Maps” tiene. En esta oportunidad, haremos una breve introducción al SDK de Google Maps para Xamarin.
Obtener un ID de Google
Para poder usar Google Maps en nuestra aplicación, debemos generar generar un ID para esta feature de google. Esto se obtiene en Google Cloud Platform. Debemos crear un nuevo proyecto (puede ser nombrado como desees). Luego de crear el proyecto, nos vamos al menu de la izquierda en nuestro dashboard y seleccionamos Google Maps; en el, debemos seleccionar la opción APIs y luego seleccionar los APIs a habilitar:
* Maps SDK for iOS
* Maps SDK for Android
Los diferentes SDKs que podemos habilitar en el servicio de Google Maps.
Una vez habilitado, necesitamos la key para acceder a ellos. En el dashboard, seleccionamos la opción APIs y Servicios > Credenciales, y procedemos a crear una nueva API key.
Nota: con esta Key, ya podemos trabajar con nuestro proyecto de Xamarin, pero es recomendable editar esta key para limitar su acceso (que únicamente use ciertos APIs y servicios), puedes ver más al respecto aquí.
Turno de configurar nuestra aplicación
Para Xamarin, puedes usar tanto el SDK nativo de Google Maps … pero esto significaría usar Custom Renderers para poder acceder a nuestra View, Maps, Pines, etc. Por suerte, podemos usar Xamarin.Forms.GoogleMaps de amay007 que nos brinda un acceso robusto a Mapas de Google en nuestro proyecto de Xamarin Forms. Así que procedemos a instalar el Nuget package de esta librería en nuestros proyectos de iOS, Android y Forms.
Configuración de Android
En el MainActivity, iniciamos esta librería el cual nos pedirá el API key (que previamente obtuvimos).
Luego nos vamos a AndroidManifest.xml y agregamos los siguientes permisos:
* AccessCoarseLocation
* AccessFineLocation
* Internet
Abrimos el XML con el Source Editor e insertamos en el tag de Application la siguiente linea:
<meta-data android:name=“com.google.android.maps.v2.API_KEY” android:value=“PASTE-YOUR-API-KEY-HERE” />
Nuestro manifest debería de quedar de la siguiente manera:
Configuración de iOS
Nos dirigimos a AppDelegate.cs e insertamos e iniciamos la libreria:
Editamos Info.plist para insertar los siguientes permisos (ProTip: podemos abrirlo en VS Code si estas usando Windows para que se nos haga más fácil insertar los permisos):
Nota: El proyecto de iOS debe de apuntar al SDK 9.0 como mínimo en Info.plist.
Insertemos código
En una nueva página de Xamarin Forms (usando XAML), podemos hacer lo siguiente:
En donde, InitialCameraUpdate recibe tres parámetros: Latitud, Longitud y el zoom inicial.
Agregar un pin:
Inserta lo siguiente en tu archivo CS (preferentemente en el constructor:
var defaultPin = new Pin { Type = PinType.Place, Label = “This is my home”, Address = “Here”, Position = new Position(-23.68, -46.87) };
map.Pins.Add(defaultPin);
También podemos crear un método adicional para agregar multiples pines. La solución completa sería la siguiente:
Obtienes el siguiente resultado:
Personalizar tu pin
Puedes usar cualquier recurso que tengas en cada plataforma como un pin, aconsejo que las medidas sean entre 20x20 o 60x60 pixeles. Asumamos que tenemos una imagen llamada coffee_pin.png, el código que usaremos para insertar la imagen sera de la siguiente manera:
pin.Icon = BitmapDescriptorFactory.FromBundle(“coffee_pin.png”);
Tendremos el siguiente resultado:
Nota: Podemos usar FromBundle, FromStream o FromView (custom view).
What’s next?
Usar Google Maps en Xamarin Forms se ha convertido en algo mucho más sencillo de usar sin perder muchas de las características del servicio. De aquí en adelante podremos explorar realizar carga de pines desde un API, usar MVVM, crear rutas, otros tipos de mapa, etc. He aquí el repositorio de nuestro proyecto:
En qué usarías Google Maps en tus apps? Quieres que abordemos diferentes ejemplos usando GoogleMaps? No olvides en compartir y seguirme como codercampos en Twitter, Facebook e Instagram para más publicaciones así.
Keep coding!
