How to Implement Maps in .NET MAUI?

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 PackagesIn your .NET MAUI project, add the following NuGet packages:

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

• Step 2: Platform-Specific Setup1 -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 MarkupIn 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”>

• Step 4: Code-BehindIn 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 Pinvar pin = new Pin
  {
  Label = “Custom Location”,
  Position = new Position(37.783333, -122.416667)
  };
  mapView.Pins.Add(pin);
• Drawing a Polylinevar 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 Polygonvar 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.