Adding Blazor Custom Elements on to the map

[bootfail]

Hi,

I want to add Custom Elements onto my BlazorGoogleMaps map so that when a user clicks on a marker, a custom popup will be shown.
The InfoWindow object has default behavior that isn't desired in the current scope (like the wrapper with styling around the content). Also enables the Custom Element more flexibility in changing the content of the popup.

What would be the best solution to place the rendered HTML structure onto the map?
https://developers.google.com/maps/documentation/javascript/examples/overlay-popup looks like a viable solution, but this isn't implemented in the library right now.

I also tried adding the element directly via some custom JS code, but I can't localize the JS map instance to add the map element..

Thanks in advance!

[valentasm1]

Your example of overlay-popup is just html overlay it has not your desired func "user clicks on a marker".
Could you give example what your want to put info InfoWindow?
Alternatively you could use Advanced Marker. So far you could pass html string (sadly no reference) and i assume it should work.
https://github.com/rungwiroon/BlazorGoogleMaps/blob/master/ServerSideDemo/Pages/AdvancedMarkerViewPage.razor

[bootfail]

Thanks for the fast response!

I want to add some more customized UI into the map, so when a marker is clicked an overlay is shown above the marker with in this case the custom element without styling that comes from the Google Maps library. Within these components are things like MudBlazor components used to make it more advanced, like actions on buttons based on the information of the marker.

The Advanced Marker is just a more advanced variant of the standard marker, but I want the "more advanced" variant of the InfoWindow, just like the custom popups documentation from Google I mentioned in my first post.

My current situation looks like this:

So basically like this, but without the default styling and closing button etc. The default wrapping div ruins the looks of the table within as you can see.

[valentasm1]

More advanced than advance :).
I think you should come with some creative combination of existing functionality. Also i am not sure about adding custom components into infowindow like MudBlazor. It could be hell (my guess).
I assume you need smth like this
https://michaelsoriano.com/customize-google-map-info-windows-infobox/

Overall sadly i dont think it is in this library scope. Like it is missing google map functionality. It is more like extensions :).
Of course i could accept PR which wont brake many things :).
I hope you understand

[bootfail]

Well the thing is, the custom elements work like a charm within the Google Maps!
So in the end I'm looking for the solution to get the barebone HTML tag for the Custom Elements into the Google Maps; I don't mind extending the library within my own project/implementing my own solution, but I want to know the best approach for this scope with performance in mind.

So when looking at the Google documentation I mentioned for the Custom Popups, I need the Javascript instance of the Google Map. Is there any way to retrieve the instance after it was initialized by BlazorGoogleMaps?

[valentasm1]

All items (i think even events) are stored in array with element guid mapObjects[item2.guidString]; I think most (or all) elements returns guid by which you could access it.
https://github.com/rungwiroon/BlazorGoogleMaps/blob/master/GoogleMapsComponents/Maps/ListableEntityBase.cs#L11
https://github.com/rungwiroon/BlazorGoogleMaps/blob/master/GoogleMapsComponents/wwwroot/js/objectManager.js#L355

[valentasm1]

Also speaking about performance and the best approach i could not help. There was/is some issue with performance and also i dont have big experience working google maps. IMO just apply google maps js principle and it should work in most cases. Maybe some users who created some PR here could help you.

[valentasm1]

Closing due to inactivity