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/_Layout.cshtml /_Host.cshtml for Server Blazor app or ~/wwwroot/index.html for Blazor WebAssembly app. 


      <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%;"> 

@code { 
    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. 

View Sample in GitHub 

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.