Hello,
============Update=============
Integrate Maps in Maui Blazor app - features like markers, directions
Firstly, you cannot add Map controls in your MAUI Razor pages.
However, you can create a Contentpage in the MAUI blazor program. Then you use Messenger - Community Toolkits for .NET | Microsoft Learn to send a message from Razor page to a Mainpages' background. Then you can navigate to this Contentpage(You can add maps control in this Contentpage).
Firstly, you need to install CommunityToolkit.Mvvm nuget package. Then create a message.
// Create a message
public class LoggedInUserChangedMessage : ValueChangedMessage<string>
{
public LoggedInUserChangedMessage(string user) : base(user)
{
}
}
Next, you can Register this message in the MainPage's background code and navigate to the created **Contentpage **called NewPage1.
public MainPage()
{
InitializeComponent();
WeakReferenceMessenger.Default.Register<LoggedInUserChangedMessage>(this, (r, m) =>
{
Navigation.PushAsync(new NewPage1());
});
}
In the end, you can send a message in the razor page.
private void Submit()
{
WeakReferenceMessenger.Default.Send(new LoggedInUserChangedMessage("navigate"));
}
As note: you need to change the MainPage =new NavigationPage( new MainPage());
in the App.xaml.cs.
After that, you can add maps control in the NewPage1.
To add Google Maps to a MAUI Blazor application, use the Google Maps API script without other specific platform settings.
For example, I open the Home.razor
page, I add <div id="map" style="height:500px;width:100%;"></div>
to show the Google map.
And I add Google Maps API script by following code.
As note: you need to request a google MAP key and replace Enter you google MAP key here
text in the following <script>
.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=Enter you google MAP key here&callback=initMap"></script>
Google Maps is initialized in the OnAfterRenderAsync
life cycle method. By invoking it using a JavaScript interop, this will initialize Google Map API when the page is rendered.
Here is completely code in the Home.razor
page, you can refer to it. As note, you can set your lat and lng in the initMap
JS method.
@page "/"
@inject IJSRuntime JS
<h3>Map</h3>
<div id="map" style="height:500px;width:100%;"></div>
<script>
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: yourlat, lng: yourlng },
zoom: 7,
});
}
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=Enter you google MAP key here&callback=initMap"></script>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
try
{
await JS.InvokeVoidAsync("initMap");
}
catch (Exception ex)
{
}
}
}
Best Regards,
Leon Lu
If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.