Databinding of the Height of the map control or changing the height of the map control after OnInitialized. about blazorgooglemaps

[valentasm1]

Funny thing that yesterday i merged pull request with this fix. Someone had this issue too.
Now you could set any type value to height and it will be used in map style like "height: {Height}"
Nuget will be available in minutes (just added now). Then let me know if it helped.

https://www.nuget.org/packages/BlazorGoogleMaps/0.6.2

[granstam-dev]

I'm sorry to say that the last change didn't help at all.
The last change were a breaking change that requires that the value of height to be set as a string ending with px.
Percent % doesn't work. If you set the value to a percent value like 90% (or any other value that not ends with ...px), no map will be shown at all.

I used the @OnAfterInit to check the height of the mapControl, see the comments in @OnAfterInit below :

@using GoogleMapsComponents
@using GoogleMapsComponents.Maps;
@inject BrowserService BrowserService

<style>
    body {
        padding: 0px;
    }
    .container-fluid {
        padding: 0px;
    }
    .vehicle-map{
        height: 100%
    }
</style>

<div class="container-fluid">
        <GoogleMap @ref="@_mapControl" Id="vehicleMap" Options="@_mapControlOptions" 
                CssClass="vehicle-map" Height="@Height" OnAfterInit="@OnAfterInit"></GoogleMap>
</div>

@code {
    private int _height = 400;

    public string Height
    {
        get { return _height.ToString() + "px"; }
    }

    protected GoogleMap _mapControl { get; set; }
    protected MapOptions _mapControlOptions { get; set; }

    protected override void OnInitialized()
    {
        _mapControlOptions = new MapOptions()
        {
            Zoom = 15,
            Center = new LatLngLiteral()
            {
                Lat = 57.6564035,
                Lng = 12.0201743
            },
            MapTypeId = MapTypeId.Roadmap
        };
    }

    async Task GetDimensions()
    {
        var dimension = await BrowserService.GetDimensions();
        _height = dimension.Height;
    }

    protected override async Task OnInitializedAsync()
    {
        System.Diagnostics.Debug.WriteLine(_mapControl?.Height); //_mapControl = null
        await GetDimensions();
        System.Diagnostics.Debug.WriteLine(_mapControl?.Height); // _mapControl.Height = 400px
    }

    private void OnAfterInit()
    {
        System.Diagnostics.Debug.WriteLine(_mapControl.Height); //_mapControl.Height = 865px
        StateHasChanged();
        // Althought _mapControl.Height = 865px, the size of the control on the page is 400px.
    }
}

[valentasm1]

I dont think it is related to BlazorGoogleMaps directly, but i could be wrong.
I will try reproduce this weekend.

Could you check these solutions.
https://stackoverflow.com/questions/10209704/set-google-maps-container-div-width-and-height-100

[valentasm1]

First of all you miss some point of blazor binding. "Dynamic" value binding is archived using with @bind- . So far Height is one way binding property and wont work this way. Google maps have strange behaviors to override style and dynamic binding wont work (i think there is somewhere strange workaround).
You way is to set google maps height to "" then google map will use parent container height and then you could control parent container height with your code.

I added just peace of code which will help you find right path. Let me know if it helps

<button @onclick="@ChangeSize">ChangeSize</button>

<div style="height: @($" {MapHH}");">
    <GoogleMap @ref="@_mapControl" Id="vehicleMap" Options="@_mapControlOptions"
               CssClass="vehicle-map" Height="" OnAfterInit="@OnAfterInit"></GoogleMap>
</div>


@code {
    private int _height = 400;

    public string MapHH { get; set; }

    public string Height
    {
        get { return _height.ToString() + "px"; }
    }

    protected GoogleMap _mapControl { get; set; }
    protected MapOptions _mapControlOptions { get; set; }

    private void ChangeSize()
    {
        MapHH = "550px";
        StateHasChanged();
    }

[kevonh]

Above needs on small change. Height set to "" makes map not show. Height needs to be set to 100%