Polyline Icon with path as SymbolPath fails render #392

GoogleMapsComponents/GoogleMapsComponents.csproj

@@ -15,7 +15,7 @@
 		<RazorLangVersion>3.0</RazorLangVersion>
 		<AddRazorSupportForMvc>true</AddRazorSupportForMvc>
 		<PackageId>BlazorGoogleMaps</PackageId>
-		<Version>4.9.1</Version>
+		<Version>4.9.2</Version>
 		<Authors>Rungwiroon</Authors>
 		<Company>QueueStack Solution</Company>
 		<Product>BlazorGoogleMaps</Product>

GoogleMapsComponents/Maps/SymbolPath.cs

@@ -1,39 +1,41 @@
 using System.Runtime.Serialization;
+using System.Text.Json.Serialization;
 
 namespace GoogleMapsComponents.Maps;
 
 /// <summary>
 /// Built-in symbol paths.
 /// </summary>
+[JsonConverter(typeof(JsonStringEnumConverter))]
 public enum SymbolPath
 {
     /// <summary>
     /// A backward-pointing closed arrow.
     /// </summary>
-    [EnumMember(Value = "3")]
+    [EnumMember(Value = "BACKWARD_CLOSED_ARROW")]
     BACKWARD_CLOSED_ARROW = 3,
 
     /// <summary>
     /// A backward-pointing open arrow.
     /// </summary>
-    [EnumMember(Value = "4")]
+    [EnumMember(Value = "BACKWARD_OPEN_ARROW")]
     BACKWARD_OPEN_ARROW = 4,
 
     /// <summary>
     /// A circle.
     /// </summary>
-    [EnumMember(Value = "0")]
+    [EnumMember(Value = "CIRCLE")]
     CIRCLE = 0,
 
     /// <summary>
     /// A forward-pointing closed arrow.
     /// </summary>
-    [EnumMember(Value = "1")]
+    [EnumMember(Value = "FORWARD_CLOSED_ARROW")]
     FORWARD_CLOSED_ARROW = 1,
 
     /// <summary>
     /// A forward-pointing open arrow.
     /// </summary>
-    [EnumMember(Value = "2")]
+    [EnumMember(Value = "FORWARD_OPEN_ARROW")]
     FORWARD_OPEN_ARROW = 2
 }

GoogleMapsComponents/wwwroot/js/objectManager.js

@@ -134,6 +134,25 @@
                         parsedItem[propertyName] = animationMapping[propertyValue] || propertyValue;
                     }
 
+                    if (propertyName == "icons") {
+                        if (Array.isArray(propertyValue)) {
+                            propertyValue.forEach(item => {
+                                var iconPath = item.icon.path;
+                                if (iconPath) {
+                                    const symbolPathMapping = {
+                                        "BACKWARD_CLOSED_ARROW": google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
+                                        "BACKWARD_OPEN_ARROW": google.maps.SymbolPath.BACKWARD_OPEN_ARROW,
+                                        "CIRCLE": google.maps.SymbolPath.CIRCLE,
+                                        "FORWARD_CLOSED_ARROW": google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
+                                        "FORWARD_OPEN_ARROW": google.maps.SymbolPath.FORWARD_OPEN_ARROW,
+                                    };
+
+                                    item.icon.path = symbolPathMapping[item.icon.path];
+                                }
+                            });
+                        }
+                    }
+
                     // Convert specific Google Maps CollisionBehavior strings to their corresponding objects
                     if (typeof propertyValue === "string" && propertyValue.startsWith("google.maps.CollisionBehavior")) {
                         const collisionBehaviorMapping = {

ServerSideDemo/Pages/MapPolyline.razor

@@ -70,11 +70,32 @@
 
     private async Task StartDrawingPolyline()
     {
-        _polyline = await Polyline.CreateAsync(_map1.JsRuntime, new PolylineOptions()
+        _polyline = await Polyline.CreateAsync(_map1.JsRuntime, 
+            new PolylineOptions()
             {
                 Draggable = true,
                 Editable = true,
-                Map = _map1.InteropObject
+                Map = _map1.InteropObject,
+                    Icons = new IconSequence[] {
+                        new IconSequence
+                        {
+                            Icon = new Symbol { 
+                                Path = SymbolPath.BACKWARD_CLOSED_ARROW,
+                                Scale = 3f, 
+                                StrokeColor = "green" },
+                            Offset = "0%"
+                        },
+                        new IconSequence
+                        {
+                            Icon = new Symbol
+                            {
+                                Path = SymbolPath.CIRCLE,
+                                Scale = 3f, 
+                                StrokeColor = "red"
+                            },
+                            Offset = "100%"
+                        },
+                    }
             });
 
         _path.Clear();