AdvancedMarkerViewをBlazorでやりたいんですが【Blazor】

経緯

マーカーにhtmlを使いたいとずっと思っていた。ふと見るとgoogleがAdvancedMarkerViewというベータ版の機能を提供しているではないか。

以前だとこれを実現しようとするとRichMarkerと巷で言われているoverlayviewを派生させて無理やり？作っていた。しかし、今回、Googleが正式に提供してくれることで、本来のマーカーの利用しやすくなった。というかGoogleが提供してくれるようになった。

RichMarkerをたくさん描画すると圧倒的にマーカーより思いこともあり、AdvancedMakrerViewに期待できないかと思っている。

とりあえずJSでやってみる

Advanced Markers (beta)  |  Maps JavaScript API  |  Google Developers

できた。ソースはおいおい載せる。

Blazorでやってみる

ライブラリはここのを利用する

GitHub - rungwiroon/BlazorGoogleMaps: Blazor interop for GoogleMap library

しかし、AdvancedMarkerViewのライブラリはまだない。

頑張って自作する。

だがうまくいかない。 AdvancedMarkerViewを呼ぶことはできる。

しかし、contentのプロパティに値を渡すことができない。contentに値をセットしないとデフォルトで値が渡るのでマーカーの設置はできるのだ。

contentのプロパティはelement型なのだが、C#にそのようなプロパティはない?

ElementReferenceがあるじゃないかと思ったが、うまくいかない。

後記

githubのやり取りを見るとやはり、このライブラリを作ってくれというやりとりはあるようだが、2022/11/19現在では、まだ実装はされていない。作者も忙しいとのことだった。

AdvancedMarkerViewはクラスタリングに対応がまだできていない。Google側が提供をまだできていないといったほうが正しいだろう。頑張れば自作できるっぽい。

下記がyoutubeのコメントでgoogleが返信を返していた内容だ。

Announcing: Advanced Markers - YouTube

The js-markerclusterer utility library currently uses Marker class to construct and render the cluster icon, so it doesn't support the marker.AdvanceMarkerView class features. You can see a sample of the js-markerclusterer's default renderer implementation here: https://googlemaps.github.io/js-markerclusterer/classes/DefaultRenderer.html

誰か、elementをC#から渡して、AdvancedMarkerViewを使える方法を教えてください。