Cómo crear Mapas bindable en Xamarin.Forms (Parte 1)

Si estas desarrollando una plicación Xamarin.Forms y vas a utilizar mapas Xamarin.Forms.Maps, te permite visualizar un mapa dentro de una aplicación Xamarin.Forms. En este artículo veremos cómo mostrar varias ubicaciones, mostrar la ubicación actual y como generar una ruta.

Paquetes Nuguet

Primero instala el paquete Nuguet Xamarin.Forms.Maps en todos tus proyectos, incluida la Biblioteca de clases.

Android

Coloca lo siguiente en el MainActivity.cs, justo debajo de global::Xamarin.Forms.Forms.Init(this, bundle); esto es para inicializar el Mapa

FormsMaps.Init(this, bundle);

iOS

En iOS también debemos inicialiar en el AppDelegate.cs, justo debajo de global::Xamarin.Forms.Forms.Init();

Xamarin.FormsMaps.Init();

Configuración del mapa

Androide

Android usa Google Maps, y para poder usarlo necesitarás una clave API (si tienes dudas como crear las clave, escríbeme para apoyarte). Luego, en el AndroidManifest.xml, agregas lo siguiente.

<meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="YOUR_API_KEY"></meta-data>

También deberás habilitar estos permisos.

• ACCESS_COARSE_LOCATION
• ACCESS_FINE_LOCATION
• ACCESS_LOCATION_EXTRA_COMMANDS
• ACCESS_MOCK_LOCATION
• ACCESS_NETWORK_STATE
• ACCESS_WIFI_STATE
• INTERNET

iOS

iOS usa Apple Maps, aunque no es tan bueno como Google Maps, tiene lo necesario para este ejemplo. Si lo que vas hacer es un mapa simple, haciendo una ruta simple o colocando algunos pines, Apple Maps es suficiente. Si estás haciendo algo complicado, es posible que desees utilizar Google Maps. Usar Google Maps en iOS no lo vamos a ver en este artículo, pero puedes usar el paquete Xamarin.Forms.GoogleMaps Nuget para lograrlo.

Para iOS 8 y superior, necesitas agregar algunos valores en su Info.plist. Esto es para cumplir con diálogos de los permisos, cuando iOS intenta cargar el mapa.

<key> NSLocationAlwaysUsageDescription </key>
 <string> AppName quiere usar tu ubicación para ...? </string>
 <key> NSLocationWhenInUseUsageDescription </key>
 <string> AppName está usando su ubicación. </string>

Crear un mapa simple

En este ejemplo vamos a crear un mapa en XAML, con el siguiente código.

<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms" 
              xmlns:x = "http://schemas.microsoft.com/winfx/2009/xaml" 
              xmlns:local = "clr-namespace:logistico"
              xmlns:maps = "clr-namespace:Xamarin.Forms.Maps;assembly = Xamarin.Forms.Maps" 
             x:Class = "XamarinMaps.MainPage">
     <maps: Map MapType = "Street" />
 </ ContentPage> 

MapType, te permite seleccionar Street, Satellite o Hybrid.

Cómo crear Mapas bindable en Xamarin.Forms (Parte 2)