Added way to set AdvancedMarker content property #338

rungwiroon · Jul 2, 2024 · 6a449c6 · 6a449c6
1 parent 7b9e160
commit 6a449c6
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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);
+    }
 }