search

rungwiroon / BlazorGoogleMaps

Blazor interop for GoogleMap library
MIT License
309 stars 99 forks source link

Add Support for PinElement (AdvancedMarkerElement Customization) #336

Closed adamthole closed 1 month ago

adamthole commented 1 month ago

Thank you for making it easy for us to add Google Maps to our Blazor applications with this great library!

Now that the old Markers are deprecated, would it be possible to add support for the PinElement (https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#PinElement) to allow us to better customize the Advanced Marker Elements?

valentasm1 commented 1 month ago

Yea i saw that recently. Problem with blazor that it dont have HTMLElement. you could pass reference, but then it treadet as different one. In AdvancedMarker case we just create HTMLElement in javascript. Maybe we should do the same. Need more investigation. For sure it must be implemented. Had to give deadline. Worst couple months

valentasm1 commented 1 month ago

I tried and then realize, that it is quite impossible. At least in standart way google.maps.marker.PinElement extends HTMLElement. Which is impossible to get from Js. https://github.com/dotnet/aspnetcore/issues/23369 I think it still possible to implement but need big hacking.

Created seperate branch where i playaround. Do you see any use case which is blocker? https://github.com/rungwiroon/BlazorGoogleMaps/tree/google.maps.marker.PinElement

valentasm1 commented 1 month ago

In my country we say "That morning is smarter than evening". I realised that instead creating seperate PinElement and then asssign to AdvancedMarkerElement i could simple add PinElement options to AdvancedMarkerElement and then assign PinElement to AdvancedMarkerElement in js. Need to check if it works with passing content, url

adamthole commented 1 month ago

That sounds like a good path forward to me. I also agree with your country's saying. :) Let me know when you have something you want me to try out.

valentasm1 commented 1 month ago

Added functionality. Basicaly you could set up AdvancedMarkerElementOptions::Content as PinElement. Not sure about glyph property of PinElement. The DOM element displayed in the pin. It could be url (locally hosted) or text. To setup div/img/svg you need to use element prop for AdvancedMarkerElement. Of course i could be wrong. While doing i had some doubts. Let me know when you check by yourself https://www.nuget.org/packages/BlazorGoogleMaps/4.6.0/

adamthole commented 1 month ago

Thank you for this update! I'm still working on my full implementation, but so far so good.

I am curious how the position of an AdvancedMarkerElement should be updated. For a regular Marker I would call the .SetPosition(position) method. How should this be done on an AdvancedMarkerElement? Just to be clear this is after initial creation of the marker, and the marker is needing to be moved to a different spot.

Thanks!

valentasm1 commented 1 month ago

AdvancedMarker doesnt have function to update position (unlike marker). Currently there are no func to set property but there is issue for that. You could subs https://github.com/rungwiroon/BlazorGoogleMaps/issues/338 It is easy to create temp workaround. You could access advancedmarker by its id from mapObjects array and update property. IMO it is trivial solutiion.

adamthole commented 1 month ago

Thank you for the information, I will subscribe to #338.

I've completed my implementation with advanced markers and all went well. Thanks!