Launch Google Maps On Blazor

Question

I am trying to launch Google maps on my Server side Blazor app using JSInterop. I seem to have tried just about everything but can't get the map to show. Unfortunately there is very little samples if any about it on the internet since it's a fairly new framework and I am equally just getting my feet wet on Blazor myself, so I am probably doing a whole lot of things wrong. Any nudge in the right direction would be appreciated.

In my component file, I have:

@page "/MapTest"
@inject IJSRuntime JSRuntime

<style>
    #map {
        width: 60%;
        height: 60%;
    }
</style>

<h1>Display Google Map</h1>


<div @ref="map" id="map"></div>

@code {

    ElementReference map; // reference to the DIV

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await JSRuntime.InvokeVoidAsync("Showgooglemap", null);
        //StateHasChanged();

    }
}

On my _Host.cshtml file, I have:

   <script src="_framework/blazor.server.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=xxxmykeyxxx&v=3"></script>

    <script type="text/javascript">
            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);
        }
            //google.maps.event.addDomListener(window, 'load', initialize);

//i tried wrapping the call in a function to see if it helps
        function Showgooglemap() {
            google.maps.event.addDomListener(window, 'load', initialize);
        }
      </script>

Answer 1

Welcome @flylily, you are almost there. I run your code in my sample Blazor-server-side project. I only changed two things. One is change the height from percentage to pixel (for percentage height HTML 5) and another is to invoke initialize function instead of Showgooglemap because initialize function already initialize your map on page load or first render. The complete codes are in following, try with these...

_Host.cshtml file,

<script src="_framework/blazor.server.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key={{put-your-api-key}}&v=3"></script>
<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);
    }   
</script>

MapTest.razor component,

@page "/MapTest"
@inject IJSRuntime JSRuntime

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

@code{
    
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("initialize", null);
            StateHasChanged();
        }

    }
}

Finally, run your application & enjoy.

Answer 2

You can use this Nuget package. It will give your Blazor app full control over Google Static and JavaScript Maps API as well. Usage can be complicated so recommend to read the documentation for more details and check the demo app.

Other Nuget package can help you access Browsers Geolocation services as well. See Geo JS docs as well as demo app.

Answer 3

You can use the package BlazorGoogleMaps from rungwiroon as well. It supports

• Map
• Marker
• Symbols
• InfoWindow
• Polygon, LineString, Rectangle, Circle
• Routes
• Coordinates
• Bounds
• Styles

and is available on Github and NuGet.

I'm using it and it works really well.