Google Maps fácil en Xamarin Forms

Carlos R. Campos
Dec 9, 2019 · 5 min read

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.

Si no tienes un SDK habilitado, la plataforma te pedirá que la habilites como muestra la foto.

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

MainActivity en nuestro proyecto de Android

Luego nos vamos a AndroidManifest.xml y agregamos los siguientes permisos:
* AccessCoarseLocation
* AccessFineLocation
* Internet

La opción Internet esta más abajo

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

Así debería de verse si abrimos ese archivo en un editor (como Visual Studio Code).
Ejemplo de como se ve desde VS for Mac

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

Resultado en ambas plataformas con un pin.

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:

Nuestros Coffee Locations!!!

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!

Carlos R. Campos

Written by

Software Developer @ Megsoft Consulting

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade