rungwiroon / BlazorGoogleMaps

Blazor interop for GoogleMap library
MIT License
309 stars 99 forks source link

Incompatible with "Blazor Web App" Template #342

Closed GutteP closed 2 weeks ago

GutteP commented 2 weeks ago

I cant get the map to load/render when I start from a "Blazor Web App" Template (server mode, .net8) in Visual Studio. There is no Startup, but added services in Program, and no _Host.cshtml/_HostLayout.cshtml but I believe App.razor has replaced it.

Pleas check it out or tell me whats missing.

valentasm1 commented 2 weeks ago

Is it server side or client side? What error do you get? Maybe you have solution to reproduce?

GutteP commented 2 weeks ago

Server side, and no errors: https://github.com/GutteP/BlazorGoogleMapBlazorWebAppExample

NIZO0 commented 2 weeks ago

I cant get the map to load/render when I start from a "Blazor Web App" Template (server mode, .net8) in Visual Studio. There is no Startup, but added services in Program, and no _Host.cshtml/_HostLayout.cshtml but I believe App.razor has replaced it.

Pleas check it out or tell me whats missing.

The same thing here.

valentasm1 commented 2 weeks ago

Missing rendermode. I will leave it to you to find out is it workaround or normal way of dealing with it. Please let us know. Maybe there are more elegant solution

@page "/map"
@using GoogleMapsComponents
@using GoogleMapsComponents.Maps
@rendermode @(new InteractiveServerRenderMode(prerender: false))
NIZO0 commented 2 weeks ago
@page "/"
@using GoogleMapsComponents
@using GoogleMapsComponents.Maps
@rendermode @(new InteractiveServerRenderMode(prerender: false))

<h1>Google Map</h1>
<div>
    <GoogleMap @ref="@_map1" Id="map1" Options="@mapOptions" OnAfterInit="AfterMapRender"></GoogleMap>
</div>
@functions {
    private GoogleMap _map1;
    private MapOptions mapOptions;

    protected override void OnInitialized()
    {
        mapOptions = new MapOptions()
            {
                Zoom = 13,
                Center = new LatLngLiteral()
                {
                    Lat = -33.8688,
                    Lng = 151.2195
                },
                MapTypeId = MapTypeId.Roadmap
            };
    }

    private async Task AfterMapRender()
    {
        var _bounds = await LatLngBounds.CreateAsync(_map1.JsRuntime);
    }
}

It worked after removing Height="100%".

GutteP commented 2 weeks ago

Yes, worked for me too!

GutteP commented 2 weeks ago

Added @rendermode @(new InteractiveServerRenderMode(prerender: false)) on top of the map page and that solved the issue.