Using Maps in .NET MAUI on Windows with the Community Toolkit #

Until recently, you couldn’t use Maps in .NET MAUI on Windows. That changes now with the .NET MAUI Community Toolkit, which provides a Windows Maps implementation. This blog post will show you how to get rid of paper maps and implement Maps in your .NET MAUI applications for iOS, Android, and now Windows.

Background of the Maps Control #

In Xamarin.Forms, the Maps control existed for three platforms: iOS, Android, and Windows. But for .NET MAUI, the backend for Windows switched from UWP to WinUI. In WinUI, there is no Maps control, so the .NET MAUI team decided to implement Maps for iOS/macOS and Android only.

Luckily, the .NET MAUI Community Toolkit allows for the creation of unofficial controls. The Toolkit now includes a Windows Maps control, which is a WebView that loads Bing Maps with the API key. It has the same API as the iOS and Android Maps controls, so you can add pins, polylines, and more.

To get started, follow the steps below.

Getting Started with Maps in .NET MAUI #

Create a new .NET MAUI project, or open your existing project that you want to add a map to. You can find my sample code on GitHub.
Install the CommunityToolkit.Maui.Maps package to your project.
Add the UseCommunityToolkitMaps() initializer in MauiProgram.cs:
```
builder.UseMauiApp<App>().UseCommunityToolkitMaps("YOUR_BING_MAPS_API_KEY");
```
Replace "YOUR_BING_MAPS_API_KEY" with your Bing Maps API key. You can obtain a Bing Maps API key by going to Bing Maps Portal.
In your MainPage.xaml, or any other page where you want to add a map, add the following namespace:
```
xmlns:maps="clr-namespace:Microsoft.Maui.Controls.Maps;assembly=Microsoft.Maui.Controls.Maps"
```
Now, you can use the maps prefix to access the Maps control:
```
<maps:Map x:Name="MyMap" WidthRequest="500" HeightRequest="500" />
```
This creates a new Map control with a width and height of 500.

To add and customize pins on your map, you can use the following code in your code-behind, obviously you will have to replace some values with your own:

var newPin = new Microsoft.Maui.Controls.Maps.Pin
{
    Label = "Subscribe to this channel",
    Address = "My Location, Road 1337",
    Position = new Position(50, 6),
    Type = PinType.Generic
};

MyMap.Pins.Add(newPin);

newPin.MarkerClicked += async (s, e) => 
{
    await DisplayAlert("Clicked", "Subscribe to the YouTube channel!", "OK");
};

With this setup, your .NET MAUI application will now have a functional Maps control on Windows, just like on iOS and Android. You can enjoy the same features like adding markers, handling marker clicks, traffic information, and more on all platforms. Be sure to check out the official documentation to learn about all the features.

If you’re curious about seeing this control in action, check out the video below that I made on implementing a map on Windows with .NET MAUI.

Note: To use the user location on the map, make sure to check and request the necessary permissions for each platform.

That’s it! Now you can build amazing projects with Maps in .NET MAUI on Windows, too.