How to Implement Maps in .NET MAUI?

How to Implement Maps in .NET MAUI?

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 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.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=””

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


  • 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()

// 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)

  • 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),

  • 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),


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.

Interested? Let's get in touch!

Get your project started with India's top 10% IT experts
Hire Now!