Preconfiguración para utilizar mapas
Para poder utilizar mapas en nuestra aplicación, es necesario hacer algunas acciones previas que detallo a continuación:
- Instalar el nuget Microsoft.Maui.Controls.Maps
- Ejecutar, desde el método CreateMauiApp de la clase MauiProgram, builder.UseMauiMaps
- En Android, es necesario modificar el archivo AndroidManifest.xml para incluir nuestro API key de Google Maps (en esta web se indica cómo obtenerlo https://developers.google.com/maps/documentation/android-sdk/get-api-key) y permisos.
Explorando las funcionalidades de los mapas
He creado un ejemplo en el que muestro las propiedades de los mapas que más útiles me han parecido, y detallo a continuación:
- IShowingUser: Indica si muestra la posición actual del usuario.
- IsScrollEnabled: Utilizada para habilitar/deshabilitar el scroll en el mapa, tanto horizontal como vertical.
- IsTrafficEnabled: Sirve para mostrar u ocultar el tráfico dentro del mapa.
- MapType: Indica el tipo de mapa, pudiendo elegir entre SatelLite, Hybrid y Street
- Pins: Colección de pins que aparecen en el mapa. Permite indicar algunos valores descriptivos, como son Location, Label y Address. NOTA: Aunque existe una propiedad Type, ésta no cambia el aspecto del pin. De hecho, para cambiar el aspecto de un pin, es necesario hacer un handler personalizado, tal y como veremos más adelante.
Moviendo el mapa
En el ejemplo que he creado, he añadido un botón, con el texto Span que mueve el mapa al centro de Madrid. Para conseguirlo, he utilizado el método MoveToRegion del mapa, al que hay que pasarle un MapSpan, creado a partir de una localización (latitud y longitud) y una distancia, que puede ser creada a partir de kilómetros, metros o millas.
var location = new Location(40.416931, -3.703328); //Madrid
MapSpan mapSpan = MapSpan.FromCenterAndRadius(location, Distance.FromKilometers(0.5));
map.MoveToRegion(mapSpan);
Jugando con el zoom
Para acercarnos o alejarnos a un punto del mapa, tenemos 2 opciones. Permitir el zoom y dejar al usuario que se mueva por el mapa utilizando los gestos pertinentes, o implementar el zoom programáticamente. En el ejemplo, he añadido dos botones para jugar con el zoom. Para conseguir acercarnos/alejarnos a un punto, he vuelto a utilizar el método MoveToRegion, manteniendo la localización del mapa y cambiando la distancia, ampliandola o reduciendola para reducir o ampliar el zoom, respectivamente.
Pins personalizados
Con las propiedades que nos ofrecen los mapas, no tenemos opciones de personalizar el pin de un mapa con una imagen alternativa. No obstante, podemos conseguirlo de una forma sencilla modificando el método utilizado para mapear los pins a los controles nativos.
El primer paso, es ampliar las propiedades de un pin, para poder especificar una imagen, tal y como se muestra a continuación:
El siguiente paso sería modificar el mapeo de estos pines para cada una de las plataformas. iOS y Android en el ejemplo que nos ocupa. Además, en ambas plataformas es necesario sobreescribir el handler pora poder añadir cierta funcionalidad periférica al mapeo de estos pines.
En iOS se sobreescribe para modificar el método que retorna la View para las Annotations del mapa.
En Android, se hace para tener una referencia a los Markers del mapa, ya que está referencia no es accesible en un MapHandler.
Podéis ver el código en iOS y Android en mi blog: Trabajando con mapas en dotNet MAUI – Jorge Diego Crespo
Por último, es necesario indicarle al builder el handler que se va a utilizar para renderizar un mapa, así cómo modificar el mapper de los pins. Para ello, se añaden las siguientes líneas en el método CreateMauiApp del MauiProgram
Al igual que en otras ocasiones, el código de este ejemplo está visible en mi blog Trabajando con mapas en dotNet MAUI – Jorge Diego Crespo y disponible en mi repositorio de Github https://github.com/jorgediegocrespo/MauiMaps