Implementing Maps in .NET MAUI Apps

Maps provide invaluable context and visualization in mobile apps. They allow marking nearby points of interest, tracking user location, displaying data visualized on a map, and more.

.NET MAUI provides several options for integrating maps into cross-platform apps built with C# and XAML. In this guide, we'll look at four options:

• Xamarin.Essentials Map
• Google Maps
• Mapbox Maps
• Custom Map Rendering

Xamarin.Essentials Map

The simplest way to add a map is using the Map control in Xamarin.Essentials. It provides a cross-platform API for displaying maps on iOS, Android and Windows.

To use it, install the Xamarin.Essentials NuGet package and import the namespace:

xmlns:xamarinessentials="clr-namespace:Xamarin.Essentials;assembly=Xamarin.Essentials"

Then add the Map control to the page:

<xamarinessentials:Map x:Name="map" />

In code, we can customize the map's initial properties:

map.MapType = MapType.Street;
map.IsShowingUser = true;

This displays a street map focused on the user's location.

We can also add pins to mark points on the map:
var pin = new Pin {
  Label = "Empire State Building",
  Address = "20 W 34th St, New York, NY 10001",
  Type = PinType.Place
};

map.Pins.Add(pin);

The Xamarin.Essentials map provides a simple API for common mapping tasks. But for more advanced features, a dedicated map SDK is recommended.

Google Maps

The Xamarin.Google.Maps package enables natively embedding Google Maps with access to the full Google Maps SDK on each platform.

Start by adding the NuGet package and your Google Maps API key to the app.

Then a map can be added to a page:

<maps:Map x:Name="map" />

To display a specific location:

var center = new Position(37.4219983, -122.084);
map.MoveToRegion(MapSpan.FromCenterAndRadius(center, Distance.FromMiles(1)));

Custom markers, polygons, ground overlays and utility layers can be added on top of the map.
For example, to mark a point:

var pin = new Marker() {
   Position = center,
   Title = "Googleplex"
};

map.Markers.Add(pin);

Google Maps enables rich, localized map experiences on each platform.

Mapbox Maps

Mapbox provides customizable vector maps using Mapbox web services and SDKs.

After installing the Mapbox Maps SDK NuGet, a map can be declared:

<maps:Mapbox x:Name="map" />

The map style and center position can be configured:

map.MapStyle = MapboxStyles.Dark;
map.Center = new Position(53.3381985, -6.2592576);

Annotations like markers, polylines and images can be overlaid:

var marker = new Maps.Marker{
  Text = "Hello World!",
  Position = new Position(53.3381985, -6.2592576)
};

map.Annotations.Add(marker);

Mapbox allows designing custom map styles and assets for branding your app's map experience.

Custom Map Rendering

For ultimate flexibility in look and behavior, you can directly render maps using the .NET MAUI graphics APIs.

This involves:

• Downloading map tile images from a provider like OpenStreetMap
• Caching the images locally
• Drawing map tiles on a SkiaSharp SKCanvasView For example:

// Lookup tile coordinates
var x = (int)Math.Floor(lon2tile(longitude, zoom)); 
var y = (int)Math.Floor(lat2tile(latitude, zoom));

// Load image for tile
var image = GetTileImage(x, y, zoom); 

// Draw tile
canvas.DrawBitmap(image, x * 256, y * 256);

Custom overlays like pins, shapes, and annotations can be rendered on top of the map tiles.

This allows for the ultimate flexibility in map design and behavior at the cost of increased implementation work.

Summary

There are several great options for adding maps in .NET MAUI apps:

• Use Xamarin.Essentials for simple map display
• Leverage Google Maps or Mapbox for rich, hosted maps
• Build custom rendered maps for unlimited control Maps provide important context and visualization in mobile apps. With .NET MAUI's mapping options, you can build immersive location-based experiences on any platform.