Live Chat Icon For mobile
Live Chat Icon

How can I add Google Maps to a Blazor application?

To add Google Maps to a Blazor application, use the Google Maps API script. To initialize Google Maps in Blazor we need to use a JavaScript interop.

Add the following scripts to ~/Pages/_Host.cshtml for Server Blazor app or ~/wwwroot/index.html for Blazor WebAssembly app.


    <script src="~/script.js"></script>
    <script type="text/javascript" src=""></script>

function initialize() {
var latlng = new google.maps.LatLng(40.716948, -74.003563);
var options = {
     zoom: 14, center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
var map = new google.maps.Map(document.getElementById ("map"), options);

@page "/"

@inject IJSRuntime JSRuntime

<h1>Display Google Map</h1>
<div id="map" style="height:500px;width:100%;">

    protected override async Task OnAfterRenderAsync(bool firstRender)
        if (firstRender)
            await JSRuntime.InvokeVoidAsync("initialize", null); 

In the above example, 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.

You can download the reference sample here.

Note: If you’d like to know how to render Google Maps in Syncfusion Blazor Map, take a look at our documentation section.

Share with

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.