With a single codebase, developers can create applications for Windows, macOS, iOS, Android, and iOS thanks to the cross-platform framework .NET MAUI. Integration of maps is frequently a critical component in the development of location-aware applications. We will look at how to use maps in.NET MAUI in this blog post.

 

Setting Up the Environment

• Visual Studio 2022: Make sure you have the latest version of Visual Studio 2022 installed with the .NET MAUI workload.
• .NET MAUI: Create a new MAUI project in Visual Studio using the appropriate template.
• Google Maps API Key (Optional): If you plan to use Google Maps, you’ll need an API key. Follow the instructions provided by Google to obtain one.

Choosing a Map Provider

.NET MAUI supports various map providers, including Google Maps, Bing Maps, and Apple Maps. In this guide, we’ll focus on integrating Google Maps.

Integrating Google Maps

• Step 1: Add NuGet Packages

In your .NET MAUI project, add the following NuGet packages:

dotnet add package Xamarin.Essentials.Maps
dotnet add package Xamarin.Essentials

• Step 2: Platform-Specific Setup

1 -Android

In your Android project, open MainActivity.cs and add the following code within the OnCreate method:

Xamarin.Essentials.Platform.Init(this, savedInstanceState);
global::Xamarin.Forms.Forms.Init(this, savedInstanceState);

Xamarin.FormsMaps.Init(this, savedInstanceState); // Add this line

2 – iOS

In your iOS project, open AppDelegate.cs and add the following code within the FinishedLaunching method:

Xamarin.Essentials.Platform.Init();
global::Xamarin.Forms.Forms.Init();

Xamarin.FormsMaps.Init(); // Add this line

• Step 3: XAML Markup

In your XAML file where you want to display the map, add the following code:

<?xml version=”1.0″ encoding=”utf-8″ ?>
<ContentPage xmlns=”http://xamarin.com/schemas/2014/forms”
xmlns:x=”http://schemas.microsoft.com/winfx/2009/xaml”
xmlns:maps=”clr-namespace:Xamarin.Essentials;assembly=Xamarin.Essentials”
x:Class=”YourNamespace.MainPage”>

<maps:MapView x:Name=”mapView” />

</ContentPage>

• Step 4: Code-Behind

In your code-behind file (MainPage.xaml.cs), you can now interact with the map:

using Xamarin.Essentials;

public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();

// Set the initial location (optional)
var initialLocation = new Location(37.7749, -122.4194); // San Francisco coordinates
mapView.MoveToRegion(MapSpan.FromCenterAndRadius(initialLocation, Distance.FromMiles(1)));
}
}

Customizing the Map

You can further customize the map by adjusting properties and adding markers, polylines, and polygons.

• Adding a Pin

var pin = new Pin
{
Label = “Custom Location”,
Position = new Position(37.783333, -122.416667)
};
mapView.Pins.Add(pin);

• Drawing a Polyline

var polyline = new Polyline
{
StrokeColor = Color.Blue,
StrokeWidth = 5,
Geopath =
{
new Position(37.785559, -122.396728),
new Position(37.780555, -122.396728),
new Position(37.777444, -122.394722),
}
};
mapView.MapElements.Add(polyline);

• Adding a Polygon

var polygon = new Polygon
{
FillColor = Color.FromRgba(255, 0, 0, 64),
StrokeColor = Color.Red,
StrokeWidth = 5,
Geopath =
{
new Position(37.783333, -122.416667),
new Position(37.781667, -122.407222),
new Position(37.774722, -122.412222),
}
};
mapView.MapElements.Add(polygon);

Conclusion

One effective way to give your users location-aware features in your .NET MAUI application is to integrate maps into it. Knowing how to use maps is a useful skill whether you’re creating a travel app, a fitness tracker, or something else entirely. You should have no trouble providing your users with interesting location-based experiences if you follow the instructions in this guide.