can't access property "map" r is undefined @/_content/Majorsoft.Blazor.Components.Maps

[aboah]

Please how can we solve the below

[2022-08-21T10:53:57.163Z] Error: Microsoft.JSInterop.JSException: can't access property "map", r is undefined
dispose@https://localhost:4090/_content/Majorsoft.Blazor.Components.Maps/googleMaps.min.js:1:3990
beginInvokeJSFromDotNet/s<@https://localhost:4090/_framework/blazor.server.js:1:3501
beginInvokeJSFromDotNet@https://localhost:4090/_framework/blazor.server.js:1:3475
_invokeClientMethod/<@https://localhost:4090/_framework/blazor.server.js:1:72001
_invokeClientMethod@https://localhost:4090/_framework/blazor.server.js:1:71987
_processIncomingData@https://localhost:4090/_framework/blazor.server.js:1:70029
kt/this.connection.onreceive@https://localhost:4090/_framework/blazor.server.js:1:64432
connect/</o.onmessage@https://localhost:4090/_framework/blazor.server.js:1:48766

[majorimi]

Hi @aboah,

Without more details I don't really know the problem.

• Have you followed the docs and setup maps correctly .AddMapExtensions() should be registered?
• Is this problem occurs during initialize or when doing some specific map calls?
• Have you checked the demo project and issue can be reproduced as well?

[aboah]

Find below the full code

// Register Majorsoft.Blazor.Components
builder.Services.AddJsInteropExtensions();
builder.Services.AddMapExtensions();

@page "/Support/location-Map-1"

@using Majorsoft.Blazor.Components.Maps
@using Majorsoft.Blazor.Components.Maps.Google

@layout SiteLayout
@implements IAsyncDisposable

@Inject UserStateServices UserStateDictionary

Display Google Map

<GoogleMap @bind-Center="_jsMapCenter" @bind-Center:event="OnMapCenterChanged"
@bind-Zoom="_jsMapZoomLevel" @bind-Zoom:event="OnMapZoomLevelChanged"
OnMapInitialized="@(() => {})"

       ApiKey="@_googleMapsApiKey" />

@code {

GoogleMap gMap;

private string _googleMapsApiKey = "";

private GeolocationData _jsMapCenter = new GeolocationData("london");
private byte _jsMapZoomLevel = 12;

public double Longitude { get; set; }
public double Latitude { get; set; }

protected override Task OnInitializedAsync()
{

    GetDictionaryData();

    return base.OnInitializedAsync();
}

private void GetDictionaryData()
{
    var locData = UserStateDictionary;

    var dicData = (dynamic)this.UserStateDictionary.Items["geolocation"];

    Longitude = dicData.Longitude;
    Latitude = dicData.Latitude;

    _jsMapCenter = new GeolocationData(Latitude, Longitude);

    //Console.WriteLine(dicData);

}

public async ValueTask DisposeAsync()
{
    //if (gMap != null)
    //    await gMap.DisposeAsync();

}

}

[majorimi]

I don't get this error. Is your project is .NET 6 or 7 Preview?

[aboah]

Hi majorimi,
I use .Net 6.0
However, with some few tweaks, the original error no more displays, but the map doesn't display. It's always blank when I use your component

[majorimi]

Hmm and any error message in the console? This might be due to you missing API key, etc.