AdvancedMarkerElementOptions - Content Invalid (not an instance of Node)

[EGInsider]

@valentasm1 I'm using recently implemented AdvancedMarkerElement class in my code and setting AdvancedMarkerElementOptions.Content = HTML element but I'm getting the error Unhandled exception rendering component: AdvancedMarkerElement: "content" invalid: not an instance of Node;

Sample Code:

        this.marker = await AdvancedMarkerElement.CreateAsync(Map.JsRuntime, new AdvancedMarkerElementOptions()
        {
            Position = position,
            Map = this.Map.InteropObject,
            Content = $"<div style='background-color:blue'>{position.Lat},{position.Lng}</div>",
        });

[EGInsider]

[valentasm1]

Found issue. Will release fix soon.

[valentasm1]

I feel really bad of releasing such bug. We just did some changes to advanced marked and forgot to test it. Sorry and let me know if this version works better https://www.nuget.org/packages/BlazorGoogleMaps/4.4.1

[EGInsider]

@valentasm1 Thanks for resolving the issue.

[EGInsider]

@valentasm1 the issue still persists when we use a list of markers instead of a single marker

[EGInsider]

@valentasm1

Sample code from my project :

            if (markerList == null)
            {
                markerList = await AdvancedMarkerElementList.CreateAsync(this.Map.JsRuntime, cordDic);
            }
            else
            {
                await markerList.AddMultipleAsync(cordDic);
            }

ig CreateAsync and AddMultipleAsync are the root cause

[valentasm1]

I updated server side demo. It works for me. What error appears in console for you?

[valentasm1]

Also one more issue that AdvancedMarker dont have nor Draggable, nor Visible properties, so if you set them then map will fail. Not very sure how to solve it since it need some refactoring. Maybe ovveride them and throw exception of trying to set. We did bad architecture in this case

[EGInsider]

@valentasm1 I'm getting the same error as above content invalid not an instance of Node.

Yes you're right the above mentioned properties aren't present in AdvanceMarkerElement class

[EGInsider]

Here's my sample code that throws out the same content invalid error

var cordDic = this.checkins
                .Where(x => selectedAgentsAndLocations.Any() ? (selectedAgentsAndLocations.Contains(x.city) || selectedAgentsAndLocations.Contains(x.user_name)) : true)
                .ToDictionary(x => Guid.NewGuid().ToString(), x =>
                {
                    var label = $" {x.user_name} ({x.created_at:dMMM h:mtt})";
                    return new AdvancedMarkerElementOptions
                    {
                        Position = new LatLngLiteral() { Lng = (double)x.@long, Lat = (double)x.lat },
                        Map = this.Map.InteropObject,
                        Title = x.address_line,
                        Content = label.GetMarkerHtml("http://maps.google.com/mapfiles/kml/shapes/man.png"),
                    };
                });

            if (markerList == null)
            {
                markerList = await AdvancedMarkerElementList.CreateAsync(this.Map.JsRuntime, cordDic);
            }
            else
            {
                await markerList.AddMultipleAsync(cordDic);
            }

            public static string GetMarkerHtml(this string label, string imgSource = null)
            {
                var html = $@"<div style='grid-area: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 8px; height: 8px;'>
                                <img src={imgSource} aria-hidden='true' height='40px' width='40px'>
                                <div class='fa-sr-only' style=""color: #00FFD1; font-weight: bold; font-family: 'Trebuchet MS';"">{label}</div>
                           </div>";

                return html;
            }

[EGInsider]

@valentasm1 ig a page to simulate AdvancedMarkerElementList can be implemented

[valentasm1]

You are right. Demo was without content. Fixed https://www.nuget.org/packages/BlazorGoogleMaps/4.4.2

[EGInsider]

@valentasm1 Thanks! for the help