How to Implement Maps in .NET MAUI Apps

Quick Overview:
With the rapidly increasing demand to optimize user engagement, maps are becoming integral to applications. Mostly, apps use a third-party service to display the map and offer associated functionalities. But for .NET MAUI applications, the built-in .NET MAUI Maps method has an added advantage. It aids in implementing maps in quick steps, which you are going to understand in this blog.

Getting Started with .NET MAUI Maps

Users always consider maps a reliable way of providing location-based information. It makes the application more appealing and accurate in offering output, helping in user engagement optimization.

Implementing maps in the .NET MAUI Apps is a smooth and streamlined task. However, you should be familiar with and have previously worked with the .NET MAUI framework. If you know the fundamentals, this tutorial is for making an application using the .NET MAUI Maps functionality, including the latest .NET MAUI New Features.

The Use Cases of Application Using the .NET MAUI Maps Feature

Nowadays, you can see numerous applications displaying maps for their respective purposes. Most of them use the .NET MAUI for .NET 7, as it’s an easy-to-use mechanism, instead of some other third-party integration. Below are some of its top use cases where this .NET MAUI framework map functionality is getting utilized:

• In food and grocery delivery, applications show the current location of the delivery agent.
• Navigational systems developed for automobiles and other fleets.
• Mobile apps linked with smartwatches show the covered distance.
• In courier applications, to track the parcels and orders.
• In applications requiring location access to provide the services.
• In social media applications, just like the Snapchat map.

What are the Steps To Use Maps in .NET MAUI Apps?

To use Maps in .NET MAUI apps, we will use the built-in Map control feature. It will offer a high-speed and seamless experience in utilizing maps on every compatible platform.

In this tutorial, we will configure the API requirements for each platform, enabling the users to view maps for viewing current locations, zoom in and out, view traffic data, and more. Let’s begin by setting up the map control in the initial phase.

The procedure to integrate maps with the .NET MAUI framework includes the following steps:

Step 1: Installation and Setup of .NET MAUI Maps Package

To install the maps package, we will use the NuGet package installer. You need to open your .NET MAUI application project using the preferred IDE, Visual Studio 2019, or the above version.

Once the project gets opened, access the NuGet package manager and search for the “Microsoft.Maui.Controls.Maps” package. Once the manager displays the package, click on it to install and activate.

Further, modify the application code per the below snippet. The primary purpose of this code block is to call the UseMauiMap method to enable the app to utilize Map APIs in the application.

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            })
            .UseMauiMaps();

        return builder.Build();
    }
}

Step 2: Additional Configuration Per Platform Requirements

You need to meet the platform requirements to display the maps on Android and iOS-based devices. Also, your application will need the appropriate permissions to access and display the end-user’s current location. So, let’s see the process for each platform individually.

Android Configuration

To configure maps for Android devices, you should complete the following four implementations:

1. Adding Google Maps API to the MAUI app

To avail of your Google Map API keys, you will be required to create a Google Cloud console account and then navigate to developers.google.com. After obtaining the keys, they should get added within the <application> element, present inside the “Platforms/Android/AndroidManifest.xml” file as displayed below:

<application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true">
  <meta-data android:name="com.google.android.geo.API_KEY" android:value="PASTE-YOUR-API-KEY-HERE" />
</application>

2. Google Play Services Number Specification

Again, within the <application> element of the AndroidManifest.xml file, put the below declaration. It will embed the Google Play Services version used for compiling the .NET MAUI app.

<meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" />

3. Location Permission Configuration

Location permission configuration is optional, as it’s required if you want to display the user’s current location or want to utilize the associated data.

To configure permissions, your application has to utilize ACCESS_COARSE_LOCATION (uses mobile data or Wi-Fi network) or ACCESS_FINE_LOCATION (uses GPS system) permissions. In addition, you should define it within the <manifest> element as its child.

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
  ...
  <!-- Required to access the user's location -->
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
</manifest>

4. WRITE_EXTERNAL_STORAGE Permission Specification

This permission is necessary if the .NET MAUI app uses API 22 or below. It’s also configured within <manifest> element as its child.

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Your .NET MAUI application is ready to use maps on Android devices.

iOS and Catalyst Mac Configuration

You don’t need to perform any additional configuration for displaying maps on iOS devices using dotnet MAUI applications. However, if you want to access the current location, then add the following two permission services in Info.plist.

• NSLocationAlwaysAndWhenInUseUsageDescription (For always accessing the location)
• NSLocationWhenInUseUsageDescription (For accessing the location while the application is active)

To configure these permissions, open Info.plist and modify it per below code block:

<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>Can we use your location at all times?</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Can we use your location when your app is being used?</string>

Step 3: Displaying a map and defining the Map Controls per Requirements

After installing the NuGet package and performing configuration for Android and iOS devices, you should define the map properties. It will help you define:

• How the map will be showcased on the screen.
• Which location or part of the map will it show to the user?
• How will the current location be showcased?
• What type of map will be viewed by the user and more?

Primarily, at this step, we will configure the view and features of the .NET MAUI maps.

Code to Display a Map

To display the map, you have to add the following XAML or C# code to the page. As a result, the application will directly call the map constructor.

XAML Code:

<ContentPage ...
             xmlns:maps="clr-namespace:Microsoft.Maui.Controls.Maps;assembly=Microsoft.Maui.Controls.Maps">
    <maps:Map x:Name="map" />
</ContentPage>

C# Code:

using Map = Microsoft.Maui.Controls.Maps.Map;

namespace WorkingWithMaps
{
    public class MapTypesPageCode : ContentPage
    {
        public MapTypesPageCode()
        {
            Map map = new Map();
            Content = map;
        }
    }
}

Code to Display Specific Map Types

Next, to display a specific map type, such as with Street, Satellite, or Hybrid view, we will use the Map.MapType property.

By default, you will see the maps displayed with street view. However, to modify it, you can use the following XAML or C# code block:

XAML Code:

<maps:Map MapType="Satellite" />

C# Code:

Map map = new Map
{
    MapType = MapType.Satellite
};

Code to display a specific location on a map

Further, to display a specific location on the map, you will pass the MapSpan arguments. The system will receive latitude and longitude data, with a focus on presenting the corresponding location to the user. As a result, whenever the user opens the map, that specific location will be displayed.

However, if you want to show the current location of the user, then you need to fetch the current longitude and latitude data and pass it as arguments.

XAML Code:

<ContentPage ...
             xmlns:maps="clr-namespace:Microsoft.Maui.Controls.Maps;assembly=Microsoft.Maui.Controls.Maps"
             xmlns:sensors="clr-namespace:Microsoft.Maui.Devices.Sensors;assembly=Microsoft.Maui.Essentials">
    <maps:Map>
        <x:Arguments>
            <MapSpan>
                <x:Arguments>
                    <sensors:Location>
                        <x:Arguments>
                            <x:Double>36.9628066</x:Double>
                            <x:Double>-122.0194722</x:Double>
                        </x:Arguments>
                    </sensors:Location>
                    <x:Double>0.01</x:Double>
                    <x:Double>0.01</x:Double>
                </x:Arguments>
            </MapSpan>
        </x:Arguments>
    </maps:Map>
</ContentPage>

C# Code:

using Microsoft.Maui.Maps;
using Map = Microsoft.Maui.Controls.Maps.Map;
...

Location location = new Location(36.9628066, -122.0194722);
MapSpan mapSpan = new MapSpan(location, 0.01, 0.01);
Map map = new Map(mapSpan);

In the above code, a MapSpan object is getting used. You should focus on defining it appropriately and passing the right arguments. While configuring it, remember to include latitude and longitude as location objects, and their degree gets spanned with double values.

Further, now we will configure the map to move and zoom using the MoveToRegion method. Again, we will pass the MapSpan arguments for it.

To move the .NET MAUI map, use the following code configuration:

using Microsoft.Maui.Maps;
using Microsoft.Maui.Controls.Maps.Map;
...

MapSpan mapSpan = MapSpan.FromCenterAndRadius(location, Distance.FromKilometers(0.444));
map.MoveToRegion(mapSpan);

To zoom in on the map, use the below code. It will display the current live location with a zoomed view:

double zoomLevel = 0.5;
double latlongDegrees = 360 / (Math.Pow(2, zoomLevel));
if (map.VisibleRegion != null)
{
    map.MoveToRegion(new MapSpan(map.VisibleRegion.Center, latlongDegrees, latlongDegrees));
}

Code to display traffic data

Additionally, to display the traffic and user’s location and to disable zoom and scroll, you can reference the below-provided code blocks for all such functionalities.

To show the traffic, you need to define the “IsTrafficEnabled” property of the Map class using the bool type. You should modify the default value from False to True to activate it. The XAML and C# codes for it are as follows:

XAML Code:

<maps:Map IsTrafficEnabled="true" />

C# Code:

Map map = new Map
{
    IsTrafficEnabled = true
};

To disable the scroll, you should use the “IsScrollEnabled” property of the Map class. Like traffic data configuration, change the default value to True, which will be active.

Code to disable scroll

XAML Code:

<maps:Map IsScrollEnabled="false" />

C# Code:

Map map = new Map
{
    IsScrollEnabled = false
};

Code to disable zoom

In addition, to disable the zoom, utilize the “IsZoomEnabled” property of the Map class. Change the value from False to True and start maps to disallow zooming.

XAML Code:

<maps:Map IsZoomEnabled="false" />

C# Code:

Map map = new Map
{
    IsZoomEnabled = false
};

Code to display the user’s location

To display the user’s location, you should define the “IsShowingUser” property of the Map class. Similar to other configurations till now, change the default value to True. But remember that before you configure it, ensure that your application is using the relevant method to grant permission for location access. Otherwise, this feature will not work on your .NET MAUI application.

XAML Code:

<maps:Map IsShowingUser="true" />

C# Code:

Map map = new Map
{
    IsShowingUser = true
};

Now, we have completed the fundamental configuration of .NET MAUI Apps. As an output, your application will fetch the user’s location and display it after availing all the permissions.

How To Avail of .NET Development Services For .NET MAUI Development?

.NET MAUI is an advanced way of developing cross-platform compatible applications. If you want to avail of .NET MAUI development services, then always hire asp.net developers from an experienced firm. In addition, for affordable software development, I prefer outsourcing the resources.

Also, remember to follow the below checklist before you collaborate with a dot net development company:

• Ensure that the company is offering all development and post-development services.
• Verify the projects in the firm’s portfolio.
• Assess the terms and conditions before signing a contract.
• Prefer the company with a flexible pricing model, 100% transparency, and zero additional charges.
• Interview the developers, designers, and testers before hiring them.
• Undergo the company’s development procedure for better clarity.

Undergoing the checklist will cover all the fundamental requirements that you need to know.

Wrapping Up on Implementing Maps in .NET MAUI Apps

.NET MAUI Maps is a built-in feature of the framework that enables the display of maps to users in the required format. To implement maps, streamline the process by installing the necessary packages to your project using the NuGet package manager. Further, as provided above, you must configure the additional Android and iOS settings. As a result, you will be able to implement Maps in .NET MAUI apps seamlessly.

Additionally, you should configure different map features, such as zoom, map type, scroll, and permissions. All such configurations entirely depend on your needs. Once you finalize them, compile the app, and it will start providing the map functionality.