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>

score 12 · Accepted Answer · edited Mar 23 '23 at 10:58

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.

I thank you so much. I pulled half of my hair out and chewed out all my nails trying to figure out why this wasn't working. You just saved me weeks of frustration. — Dave Ituru, Dec 30 '19 at 11:03
Is possible add multiple markers in MapTest.razor.component ? — Diego Venâncio, Jun 12 '21 at 20:28

Major · Answer 2 · 2021-03-12T18:49:20.870

4

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.

edited Mar 12 '21 at 18:49

answered Mar 12 '21 at 11:22

Major

5,948
2
45
60

I stumbled across this thread randomly, but that got my attention. (⊙⊙) – Bennyboy1973 Mar 12 '21 at 11:35
To say that usage can be complicated is an understatement and to suggest reading the documentation to be helpful is a dramatic overstatement. This library may claim to be a good wrapper, and it might be... but I could not get it to work at all. – Kevon May 10 '21 at 19:42
Google maps has tons of features. So library also bit complicated with addition of Js callbacks, etc. Demo app made it work perfectly you should check the code. If you still have issues submit it on GitHub... – Major May 10 '21 at 20:30

score 3 · Answer 3 · answered Mar 12 '21 at 18:30

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.

answered Mar 12 '21 at 18:30

FranzHuber23

3,311
5
24
63

2

I looked at this, but cannot find any good documentation. Even the simple bit of code on the home page does not match the code in the samples. Have you found any good documentation or sample usage? I'm just trying to do something simple like setting the height on the GoogleMap component. – Kevon May 07 '21 at 00:43
1

I am supporter and i am lazy to fill all documentation nicely :). I could assure that server side sample have allmost all possible variations with map – valentasm Jul 10 '21 at 19:59
1

@Kevon I just downloaded the zip file and opened it in Visual Studio, all ran fine. The code samples are the best documentation – Avrohom Yisroel Jul 14 '21 at 15:04

Launch Google Maps On Blazor

3 Answers3

Linked