How to Implement Google Maps in a .NET MAUI Blazor App.

Question

I'm currently developing a .NET MAUI app using Blazor and targeting .NET 7. One of the key features I'm looking to implement is integration with Google Maps to display locations of customers. However, I'm facing challenges with integrating Google Maps into my app and could use some guidance. Expectations: My expectation was to find clear guidance or examples demonstrating how to integrate Google Maps into a .NET MAUI Blazor app targeting .NET 7. I anticipated being able to follow a set of steps or utilize a library/package that would streamline the integration process and allow me to easily display a Google Map within my app. Additionally, I hoped to understand any platform-specific considerations or configurations necessary for Android .

Answer 1

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.