Add Support for PinElement (AdvancedMarkerElement Customization)

[adamthole]

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]

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]

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.
dotnet/aspnetcore#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]

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]

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]

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]

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]

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
#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]

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

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