From 6a449c655da720baa8d7f0844e3b42a27e58477b Mon Sep 17 00:00:00 2001
From: Valentas <valentas.mat@gmail.com>
Date: Tue, 2 Jul 2024 11:59:26 +0300
Subject: [PATCH] Added way to set AdvancedMarker content property #338

---
 GoogleMapsComponents/GoogleMapsComponents.csproj    |  2 +-
 GoogleMapsComponents/Maps/AdvancedMarkerView.cs     |  5 +++++
 GoogleMapsComponents/wwwroot/js/objectManager.js    |  6 ++++++
 .../Pages/MapAdvancedMarkerViewPage.razor           | 13 +++++++++++++
 4 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/GoogleMapsComponents/GoogleMapsComponents.csproj b/GoogleMapsComponents/GoogleMapsComponents.csproj
index 98423c68..e0d0d2c4 100644
--- a/GoogleMapsComponents/GoogleMapsComponents.csproj
+++ b/GoogleMapsComponents/GoogleMapsComponents.csproj
@@ -15,7 +15,7 @@
 		<RazorLangVersion>3.0</RazorLangVersion>
 		<AddRazorSupportForMvc>true</AddRazorSupportForMvc>
 		<PackageId>BlazorGoogleMaps</PackageId>
-		<Version>4.6.1</Version>
+		<Version>4.6.2</Version>
 		<Authors>Rungwiroon</Authors>
 		<Company>QueueStack Solution</Company>
 		<Product>BlazorGoogleMaps</Product>
diff --git a/GoogleMapsComponents/Maps/AdvancedMarkerView.cs b/GoogleMapsComponents/Maps/AdvancedMarkerView.cs
index a82e7066..accb15f2 100644
--- a/GoogleMapsComponents/Maps/AdvancedMarkerView.cs
+++ b/GoogleMapsComponents/Maps/AdvancedMarkerView.cs
@@ -34,6 +34,11 @@ public async Task SetPosition(LatLngLiteral newPosition)
     {
         await _jsObjectRef.InvokePropertyAsync("position", newPosition);
     }
+
+    public async Task SetContent(string newContent)
+    {
+        await _jsObjectRef.InvokePropertyAsync("content", newContent);
+    }
 }
 
 [Obsolete("Use AdvancedMarkerElement")]
diff --git a/GoogleMapsComponents/wwwroot/js/objectManager.js b/GoogleMapsComponents/wwwroot/js/objectManager.js
index 23bad666..f59e51a2 100644
--- a/GoogleMapsComponents/wwwroot/js/objectManager.js
+++ b/GoogleMapsComponents/wwwroot/js/objectManager.js
@@ -599,6 +599,12 @@
                     }
                 }
 
+                //Could be issue in future. Currently now it is used by AdvancedMarkerElement
+                let advancedMarkerElementContent = getAdvancedMarkerElementContent("google.maps.marker.AdvancedMarkerElement", functionToInvoke == "content" ? args2[0] : null);
+                if (advancedMarkerElementContent !== null) {
+                    args2[0] = advancedMarkerElementContent;
+                }
+
                 try {
                     obj[functionToInvoke] = args2[0];
                 } catch (e) {
diff --git a/ServerSideDemo/Pages/MapAdvancedMarkerViewPage.razor b/ServerSideDemo/Pages/MapAdvancedMarkerViewPage.razor
index b3f98c28..3a5cd849 100644
--- a/ServerSideDemo/Pages/MapAdvancedMarkerViewPage.razor
+++ b/ServerSideDemo/Pages/MapAdvancedMarkerViewPage.razor
@@ -9,6 +9,7 @@
 <GoogleMap @ref="@_map1" Id="map1" Options="@_mapOptions" OnAfterInit="OnAfterRenderAsync"></GoogleMap>
 <button @onclick="@AddMarker">Add marker</button>
 <button @onclick="@UpdatePosition">Recenter last</button>
+<button @onclick="@UpdateContent">Update content</button>
 <button @onclick="@AddMarkerWithPinElement">Add marker with pin element</button>
 <br/>
 <p>Marker list</p>
@@ -272,4 +273,16 @@
         await lastMarker.SetPosition(mapCenter);
         await _bounds.Extend(mapCenter);
     }
+
+    private async Task UpdateContent()
+    {
+        if (!_markers.Any())
+        {
+            return;
+        }
+
+        const string newContent = "<svg width=\"200\" height=\"200\" xmlns=\"http://www.w3.org/2000/svg\">\r\n  <!-- Body -->\r\n  <ellipse cx=\"100\" cy=\"130\" rx=\"50\" ry=\"30\" fill=\"blue\"/>\r\n  \r\n  <!-- Wing -->\r\n  <ellipse cx=\"80\" cy=\"120\" rx=\"30\" ry=\"20\" fill=\"lightblue\"/>\r\n  \r\n  <!-- Head -->\r\n  <circle cx=\"100\" cy=\"80\" r=\"25\" fill=\"blue\"/>\r\n  \r\n  <!-- Eye -->\r\n  <circle cx=\"110\" cy=\"75\" r=\"5\" fill=\"black\"/>\r\n  \r\n  <!-- Beak -->\r\n  <polygon points=\"125,80 135,75 125,70\" fill=\"orange\"/>\r\n  \r\n  <!-- Tail -->\r\n  <polygon points=\"60,130 50,140 70,140\" fill=\"blue\"/>\r\n  \r\n  <!-- Legs -->\r\n  <line x1=\"90\" y1=\"160\" x2=\"90\" y2=\"180\" stroke=\"orange\" stroke-width=\"3\"/>\r\n  <line x1=\"110\" y1=\"160\" x2=\"110\" y2=\"180\" stroke=\"orange\" stroke-width=\"3\"/>\r\n</svg>\r\n";
+        var lastMarker = _markers.Peek();
+        await lastMarker.SetContent(newContent);
+    }
 }