Map ui controls double render on blazor web app

[NIZO0]

The Map renders correctly the first time. However Navigating to a certain page and then navigating back to the MapPage bugs the UI visually and interactively. Hovering over a marker or trying to grap it won't work.

First Render

Further Renders

[valentasm1]

Any console error?
Any simple repro page?

[NIZO0]

https://github.com/NIZO0/BlazorGoogleMapsBugRepro

I created a repro project.
Refreshing the page manually solves the problem. I think the map is not being disposed correctly when navigating.

[valentasm1]

How to reproduce?
Start solution, go to Counter, goto home?
What should happen?
Which browser?
I dont see any console errors

Try put random number for v= maybe it cached since assebly version didnt changed

<script src="_content/BlazorGoogleMaps/js/objectManager.js?v=@typeof(App).Assembly.GetName().Version"></script>

[NIZO0]

Navigate to the WeatherPage for example then navigate back to the HomePage.
There are no console errors.
The map becomes bugged.
I tested on Microsoft Edge and Google, and got the same result.

[valentasm1]

Honestly i saw arrows just now. You should mentions whats wrong. Buggy isnt clear.
So i wanted to check this solution but it didnt helped. Even more you are on same issue.

#342

I dont know how to help. It looks like some blazor stuff.

[MobicomTobias]

@NIZO0 We are seeing exact same solution in our production app..

@valentasm1 please have a second look at @NIZO0 repo as it worked first to replicate the issue via:

1. Downloading repo
2. Adding following to appsettings.json:
   "GoogleMapsApiKey": "<apikey>"
3. Launch application, map loads fine initially
4. Navigate to the Counter page
5. Navigate back to Home, issue replicates then

This repo is minimalistic so creds to @NIZO0 for taking the time to make it.

The following image is from our own solution.

The following is from the reproduction repo by @NIZO0:

[valentasm1]

Sorry but i dont have ideas. I dont work with blazor, i dont work with google maps, so my knowledge is limited.
Maybe it rerenders map multiple times. Maybe check invocation times. Maybe try pure js map. Maybe try init map from js link.

I understand frustration, but my time is very limited and very a lot of.

[MobicomTobias]

Regardless, thank you for taking the time to read and reply, we will be looking into the newer gmp-map javascript api that google has given and see about potentially extending it to a library eventually (if time permits).

[valentasm1]

What difference between div and gpm-map?
Documentation dont state any preference
https://developers.google.com/maps/documentation/javascript/add-google-map

[MobicomTobias]

It seems to inherently work better with server rendered components as the items of the maps element can be declared directly as html elements:
https://developers.google.com/maps/documentation/javascript/add-google-map-wc-tut
Vs. the javascript approach:
https://developers.google.com/maps/documentation/javascript/adding-a-google-map

You can see both choices on the left hand side as "Add a Google Map with a marker using HTML" and "Add a Google Map with a marker using Javascript"

If the gmp version can load maps past initial page load (so when dynamically fed gmp elements), then populating the page with gmp elements is much more like how blazor server side operates, but arguably at a networking cost due to the increase in package sizes required, but for most apps, it will be negligible (sidenote: not sure how well optimized the blazor javascript interop synchronization works, so might actually not be a drawback to define the map in gmp elements).

[valentasm1]

Created related task. It think gmp-map is out of scope currently.
#367

[valentasm1]

Did you found solution?

[mrakowRC]

Im getting this error as well is there any solution? Im using server side rendering as well

[Jarlstig]

For me the solution was to add data-enhance-nav="false" to the url that has the navigation to the map.

<a data-enhance-nav="false" href="/map">Display map</a>

[MobicomTobias]

For me the solution was to add data-enhance-nav="false" to the url that has the navigation to the map.

<a data-enhance-nav="false" href="/map">Display map</a>

This worked for me, we had stalled the project for a while and focused on more important areas, but tried to just insert it. It adds quite a bit of overhead as it is no longer doing navigation caching I would assume, but if it is only added to the navigation elements that leads to a map, then it is acceptable

[valentasm1]

I will add to main page documentation. Awesome.

[valentasm1]

Could you try
https://learn.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore-9.0?view=aspnetcore-9.0#add-static-server-side-rendering-ssr-pages-to-a-globally-interactive-blazor-web-app
@Attribute [ExcludeFromInteractiveRouting]