First of all, there is an issue about Customize map style. You can follow up it. And for a workaround, you can call the platform native code to do that.
- On the iOS
The Map's native control is MauiMKMapView
that implement the MKMapView
, so you can set the overrideUserInterfaceStyle
property to get the dark mode.
Create the custom handler for the Map:
namespace MauiAppTest.Platforms.iOS{ public class CustomMapHandler : MapHandler { protected override void ConnectHandler(MauiMKMapView platformView) { platformView.OverrideUserInterfaceStyle = UIKit.UIUserInterfaceStyle.Dark; base.ConnectHandler(platformView); } }}
In addition, you also use the instance of the Map control to do that in the Page's OnHandlerChanged
method, Such as:
(mapname.Handler.PlatformView as MauiMkMapView) .OverrideUserInterfaceStyle = UIKit.UIUserInterfaceStyle.Dark;
- On the Android
The map control uses the google map. So you can read the official document about Add a Styled Map.
First of all, create your dark mode JSON file (buid action is embedded resource) about Style Reference for Maps SDK for Android. You can set the dark mode color by yourself.
And then, you can alo create the custom handler for the Android platform:
namespace MauiAppTest.Platforms.Android{ class CustomMapHandler : MapHandler { protected override void ConnectHandler(MapView platformView) { var googlemap = this.Map; var a = Assembly.GetExecutingAssembly(); using var stream = a.GetManifestResourceStream("MauiAppTest.dark_map_style.json"); string json = string.Empty; using (var reader = new StreamReader(stream!)) { json = reader.ReadToEnd(); } googlemap.SetMapStyle(new Android.Gms.Maps.Model.MapStyleOptions(json)); base.ConnectHandler(platformView); } }}
Or you can just implement the IOnMapReadyCallback
like the google map official document did:
public class MainActivity : MauiAppCompatActivity, IOnMapReadyCallback{ public void OnMapReady(GoogleMap googleMap) { var a = Assembly.GetExecutingAssembly(); using var stream = a.GetManifestResourceStream("MauiAppTest.dark_map_style.json"); string json = string.Empty; using (var reader = new StreamReader(stream!)) { json = reader.ReadToEnd(); } googlemap.SetMapStyle(new Android.Gms.Maps.Model.MapStyleOptions(json)); }}
Finally, use the custom handler in the MauiProgram.cs:
UseMauiMaps().ConfigureMauiHandlers((handlers) => {#if ANDROID handlers.AddHandler(typeof(Map), typeof(MauiAppTest.Platforms.Android.CustomMapHandler));#elif IOS handlers.AddHandler(typeof(Map), typeof(MauiAppTest.Platforms.iOS.CustomMapHandler));#endif });