majorimi / blazor-components

Components collection and extensions for Blazor applications.
MIT License
328 stars 59 forks source link

GoogleMap not re-rendering on navigation #73

Closed rodael closed 3 years ago

rodael commented 3 years ago

Google Maps is not rendering when navigating from the component and back.

Steps:

  1. Open the demo app
  2. Click any link in the left side
  3. Click 'Maps'
  4. The 'Rendered Google JavaScript Maps:' is empty.
majorimi commented 3 years ago

Hi @rodael, Thanks for noticing this issue. It seems Google map JS problems. I will try to come up with some solutions.

majorimi commented 3 years ago

All looks good now. Fix will be released in v1.4.0 with other new components. Probably in 1 month or so... Until then if you find anything else just report it as well. Thanks.

majorimi commented 3 years ago

Hi @rodael, This issue now fixed and released with v1.4.0

rodael commented 3 years ago

Hi @rodael, This issue now fixed and released with v1.4.0

Awesome! Thanks :)

NO1225 commented 3 years ago

Hello I have a bit of similar issue When using the map inside a Modal After closing the Modal and trying to open again we get this error and the map isn't visible crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Cannot access a disposed object. Object name: 'JSObjectReference'. System.ObjectDisposedException: Cannot access a disposed object. Object name: 'JSObjectReference'.

I Also have the same issue even when used in pages and after navigating out of the page that has the map and then back in, i get the same exception

BTW: I'm using v1.4.0 Thank you.

majorimi commented 3 years ago

Hi @NO1225,

Thanks for contacting. The original issue was in v1.3.0. Due to gtag.js registration problems. So this seem a different issue. You can test it by reverting back to v1.3.0...

For me it seems you might have a @ref to the Maps component outside of the Modal dialog. When HTML of the dialog removed from the DOM or you navigate to another page. Blazor Framework will disposes all IDisposable or IAsyncDisposable components. And since you hold a reference "outside" you still can access the component or service reference, but it was already disposed. Is this the case?

Please see Google Maps demo. When you navigate back and forth to this page it does not throws exception. So probably the issue is in your code. Please try to check the demo code and compare what is the diff. If you cannot find it please provide some example how you are using the Maps components.

NO1225 commented 3 years ago

Thank you very much The problem was that I added the services as scoped And scoped services act like singletons in blazor Switching to transient solved the problem. Thank you for the wonderful library

majorimi commented 3 years ago

Ah ok so it is already fixed... Quick one :) Not sure which service registrations are you referring. But if it is belonging to the Maps or JS interop, Geolocations, etc. Then you can use the extension methods provided by components. Check the docs Usage sections.

Blazor WASM:

builder.Services.AddJsInteropExtensions();
builder.Services.AddMapExtensions();

Blazor Server:

services.AddJsInteropExtensions();
services.AddMapExtensions();

I enjoy developing these components and learning new tech... So welcome! Check out the other components I also have Modal, etc. Many new is coming soon. Next ones should be some more Map types. Also you can the repo, etc. Thank you!