Google maps in blazor 3 stops the connection to my component - google-maps

Question

I'm trying to build small app - allowing me to take 1-6 pictures and get my coordinates.
But after implementing google maps, the other functions in my app are breaking.
My google searches points me towards the google map I get through jQuery modifies the doom and makes the Blazor app drop the connection.
Im running Blazor 3, ServerPrerendered mode
I have spend 3 days googling on this issue now, and everything I tried have failed.
In short, when I render a google map, the other functions (like adding a picture to a model) crashes the app - so I can't click anything.
<div class="col-12 new-lead">
<EditForm Model="leadModel" OnValidSubmit=#ValidFormSubmitted>
<label for="imageInput">Take a picture</label>
#if (imageDictionary.Count > 0)
{
#foreach (var imageDataUrl in imageDictionary)
{
<div class="image-list__item" #onclick="(() => OnInputFileDelete(imageDataUrl.Key))">
<img src="#imageDataUrl.Key" />
Click to delete
</div>
}
}
<InputFile OnChange="OnInputFileChange" accept="image/png,image/gif,image/jpeg" id="imageInput" class="hidden"></InputFile>
<span>#leadModel.Latitude,#leadModel.Longitude</span>
<div id="map"></div>
<InputText id="Latitude" #bind-Value="leadModel.Latitude" class="hidden"/>
<InputText id="Longitude" #bind-Value="leadModel.Longitude" class="hidden"/>
<input type="submit" class="btn btn__big btn__big--white " value="Create" />
</EditForm>
</div>
In my On Initialized I get the the coordionates which is set in a session, once the user logs in.
The probme is that my OnAfterRender and OnInputFileChange conflicts at :
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await jsRuntime.InvokeVoidAsync("createMap", null);
}
}
private async Task OnInputFileChange(InputFileChangeEventArgs e)
{
var maxAllowedFiles = 6;
var format = "image/png";
foreach (var imageFile in e.GetMultipleFiles(maxAllowedFiles))
{
var resizedImageFile = await imageFile.RequestImageFileAsync(format, 200, 200);
var buffer = new byte[resizedImageFile.Size];
await resizedImageFile.OpenReadStream().ReadAsync(buffer);
var imageDataUrl = $"data:{format};base64,{Convert.ToBase64String(buffer)}";
imageDictionary.Add(imageDataUrl, buffer);
}
}
My Jquery map is a quite simple copy/paste
function createMap() {
navigator.geolocation.getCurrentPosition(function (position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy; console.log(latitude, longitude, accuracy);
var coords = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: 19,
center: coords,
mapTypeControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{
featureType: "poi",
elementType: "labels",
stylers: [{ visibility: "off" }]
}
]
};
map = new google.maps.Map(
document.getElementById("map"), mapOptions
);
marker = new google.maps.Marker({
position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
icon: {
url: "/content/images/pegman.png",
scaledSize: new google.maps.Size(20, 45)
// https://sites.google.com/site/gmapsdevelopment/
},
map: map,
label: {
color: 'transparent', // <= HERE
fontSize: '11px',
fontWeight: '900',
text: 'Example Label'
}
});
});
}
Everything loads in fine, the UI and the map.
But when I try to add a new picture I get the errors :
[2021-02-17T01:06:14.210Z] Information: Normalizing '_blazor' to 'https://localhost:44305/_blazor'.
blazor.server.js:1 [2021-02-17T01:06:14.458Z] Information: WebSocket connected to wss://localhost:44305/_blazor?id=ZK1ovXOGgNBBMwPZ1n3jVg.
[2021-02-17T01:06:17.282Z] Error: There was an error applying batch 4.
Uncaught (in promise) TypeError: Cannot read property 'removeChild' of null
[2021-02-17T01:06:17.307Z] Error: System.AggregateException: One or more errors occurred.
(TypeError:Cannot read property 'removeChild' of null) ---> System.InvalidOperationException:
TypeError: Cannot read property 'removeChild' of null at Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, Int32[] updatedComponents)
[2021-02-17T01:06:17.308Z] Information: Connection disconnected.
Uncaught (in promise) Error: Cannot send data if the connection is not in the 'Connected' State.

Answer 1

solution was to add all map logic to a separate blazor component and load it into the view. That way the sockets won't break.