vikramlearning · gvreddy04 · Jul 10, 2026 · Jul 10, 2026 · Jul 10, 2026 · Jul 10, 2026
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Maps/GoogleMapDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Maps/GoogleMapDocumentation.razor
@@ -46,11 +46,19 @@
     <Demo Type="typeof(GoogleMap_Demo_03_Marker_Customization_D_Change_the_glyph_color)" Tabs="true" />
 </Section>
 <Section Size="HeadingSize.H3" Name="Hide the glyph" PageUrl="@pageUrl" Link="hide-the-glyph">
-    <div class="mb-3">Set the <b>PinElement.Glyph</b> option to an empty string to hide a marker's glyph.</div>
+    <div class="mb-3">Set the <b>PinElement.GlyphText</b> option to an empty string to hide a marker's glyph.</div>
     <Demo Type="typeof(GoogleMap_Demo_03_Marker_Customization_E_Hide_the_glyph)" Tabs="true" />
 </Section>
+<Section Size="HeadingSize.H3" Name="Use text glyphs" PageUrl="@pageUrl" Link="use-text-glyphs">
+    <div class="mb-3">Use the <b>PinElement.GlyphText</b> option to show text in a marker pin.</div>
+    <Demo Type="typeof(GoogleMap_Demo_03_Marker_Customization_G_Use_text_glyphs)" Tabs="true" />
+</Section>
+<Section Size="HeadingSize.H3" Name="Use image glyphs" PageUrl="@pageUrl" Link="use-image-glyphs">
+    <div class="mb-3">Use the <b>PinElement.GlyphSrc</b> option to show an image in a marker pin.</div>
+    <Demo Type="typeof(GoogleMap_Demo_03_Marker_Customization_H_Use_image_glyphs)" Tabs="true" />
+</Section>
 <Section Size="HeadingSize.H3" Name="Use icon fonts" PageUrl="@pageUrl" Link="use-icon-fonts">
-    <div class="mb-3">Use the <b>PinElement.UseIconFonts</b> and <b>PinElement.Glyph</b> options to use the icon fonts.</div>
+    <div class="mb-3">Existing <b>PinElement.UseIconFonts</b> and legacy <b>PinElement.Glyph</b> configurations remain supported while existing applications migrate.</div>
     <Demo Type="typeof(GoogleMap_Demo_03_Marker_Customization_F_Use_icon_fonts)" Tabs="true" />
 </Section>
 

diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Maps/GoogleMap_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Maps/GoogleMap_Demo_01_Examples.razor
@@ -1,7 +1,18 @@
 @inherits GoogleMapDemoComponentBase
 
-<GoogleMap ApiKey="@ApiKey"
-           Center="new GoogleMapCenter(-34.397, 150.644)"
-           Height="400"
-           Width="100"
-           Zoom="8" />
+<div class="row g-4">
+    <div class="col-md-6">
+        <GoogleMap ApiKey="@ApiKey"
+                   Center="new GoogleMapCenter(-34.397, 150.644)"
+                   Height="400"
+                   Width="100"
+                   Zoom="8" />
+    </div>
+    <div class="col-md-6">
+        <GoogleMap ApiKey="@ApiKey"
+                   Center="new GoogleMapCenter(37.43238031167444, -122.16795397128632)"
+                   Height="400"
+                   Width="100"
+                   Zoom="12" />
+    </div>
+</div>
diff --git a/...Components/Pages/Demos/Maps/GoogleMap_Demo_03_Marker_Customization_E_Hide_the_glyph.razor b/...Components/Pages/Demos/Maps/GoogleMap_Demo_03_Marker_Customization_E_Hide_the_glyph.razor
@@ -12,15 +12,15 @@
     {
         new GoogleMapMarker()
         {
-            PinElement = new PinElement{ Glyph = "",  },
+            PinElement = new PinElement{ GlyphText = "",  },
             Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352) ,
             Title = "Single family house with modern design",
         },
         new GoogleMapMarker()
         {
-            PinElement = new PinElement{ Glyph = "",  },
+            PinElement = new PinElement{ GlyphText = "",  },
             Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727) ,
             Title = "Townhouse with friendly neighbors",
         }
     };
-}
+}
diff --git a/...Components/Pages/Demos/Maps/GoogleMap_Demo_03_Marker_Customization_F_Use_icon_fonts.razor b/...Components/Pages/Demos/Maps/GoogleMap_Demo_03_Marker_Customization_F_Use_icon_fonts.razor
@@ -8,6 +8,7 @@
            Markers="markers" />
 
 @code {
+#pragma warning disable CS0618 // This demo intentionally exercises the legacy icon-font compatibility path.
     List<GoogleMapMarker> markers = new()
     {
         new GoogleMapMarker()
@@ -107,4 +108,5 @@
             Title = "Heavy rain",
         }
     };
-}
+#pragma warning restore CS0618
+}
diff --git a/...omponents/Pages/Demos/Maps/GoogleMap_Demo_03_Marker_Customization_G_Use_text_glyphs.razor b/...omponents/Pages/Demos/Maps/GoogleMap_Demo_03_Marker_Customization_G_Use_text_glyphs.razor
@@ -0,0 +1,26 @@
+@inherits GoogleMapDemoComponentBase
+
+<GoogleMap ApiKey="@ApiKey"
+           Center="new GoogleMapCenter(37.43238031167444, -122.16795397128632)"
+           Height="400"
+           Width="100"
+           Zoom="10"
+           Markers="markers" />
+
+@code {
+    List<GoogleMapMarker> markers = new()
+    {
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement { Background = "#137333", GlyphColor = "white", GlyphText = "A" },
+            Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352),
+            Title = "Marker A",
+        },
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement { Background = "#1A73E8", GlyphColor = "white", GlyphText = "B" },
+            Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727),
+            Title = "Marker B",
+        }
+    };
+}
diff --git a/...mponents/Pages/Demos/Maps/GoogleMap_Demo_03_Marker_Customization_H_Use_image_glyphs.razor b/...mponents/Pages/Demos/Maps/GoogleMap_Demo_03_Marker_Customization_H_Use_image_glyphs.razor
@@ -0,0 +1,28 @@
+@inherits GoogleMapDemoComponentBase
+
+<GoogleMap ApiKey="@ApiKey"
+           Center="new GoogleMapCenter(37.43238031167444, -122.16795397128632)"
+           Height="400"
+           Width="100"
+           Zoom="10"
+           Markers="markers" />
+
+@code {
+    private const string MarkerImageUrl = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
+
+    List<GoogleMapMarker> markers = new()
+    {
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement { GlyphSrc = MarkerImageUrl },
+            Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352),
+            Title = "Image marker one",
+        },
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement { GlyphSrc = MarkerImageUrl },
+            Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727),
+            Title = "Image marker two",
+        }
+    };
+}
diff --git a/...trap.Demo.RCL/Components/Pages/Demos/Maps/GoogleMap_Demo_05_Make_a_marker_clickable.razor b/...trap.Demo.RCL/Components/Pages/Demos/Maps/GoogleMap_Demo_05_Make_a_marker_clickable.razor
@@ -10,6 +10,7 @@
            OnMarkerClick="OnGoogleMapMarkerClick" />
 
 @code {
+#pragma warning disable CS0618 // This demo intentionally exercises the legacy icon-font compatibility path.
     [Inject] public ToastService ToastService { get; set; } = default!;
 
     private void OnGoogleMapMarkerClick(GoogleMapMarker marker)
@@ -116,4 +117,5 @@
             Title = "Heavy rain",
         }
     };
-}
+#pragma warning restore CS0618
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Maps/GoogleMap_Demo_06_Dynamic_markers.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Maps/GoogleMap_Demo_06_Dynamic_markers.razor
@@ -22,6 +22,7 @@
            OnMarkerClick="OnGoogleMapMarkerClick" />
 
 @code {
+#pragma warning disable CS0618 // This demo intentionally exercises the legacy icon-font compatibility path.
     Random random = new Random(2000000000);
     GoogleMap googleMapRef = default!;
 
@@ -161,4 +162,5 @@
                 Title = "Heavy rain",
             };
     }
-}
+#pragma warning restore CS0618
+}
diff --git a/blazorbootstrap/Components/Maps/GoogleMap.razor b/blazorbootstrap/Components/Maps/GoogleMap.razor
@@ -4,9 +4,8 @@
 <ScriptLoader Async="true"
               Defer="true"
               Class="mt-4"
-              ScriptId="@($"script{Id}")"
-              Source="@GoogleMapsJsFileUrl"
-              OnLoad="OnScriptLoad" />
+              ScriptId="blazor-bootstrap-google-maps-script"
+              Source="@GoogleMapsJsFileUrl" />
 
 <div @ref="@Element" id="@Id" class="@ClassNames" style="@StyleNames" @attributes="@AdditionalAttributes">
 </div>
diff --git a/blazorbootstrap/Components/Maps/GoogleMap.razor.cs b/blazorbootstrap/Components/Maps/GoogleMap.razor.cs
@@ -10,6 +10,14 @@ public partial class GoogleMap : BlazorBootstrapComponentBase
 
     #region Methods
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+            await SafeInvokeVoidAsync("window.blazorBootstrap.googlemaps.initialize", Id, Zoom, Center, Markers, Clickable, objRef);
+
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
     protected override async Task OnInitializedAsync()
     {
         objRef ??= DotNetObjectReference.Create(this);
@@ -64,11 +72,6 @@ public ValueTask UpdateMarkersAsync(IEnumerable<GoogleMapMarker> markers)
         return ValueTask.CompletedTask;
     }
 
-    private void OnScriptLoad()
-    {
-        Task.Run(() => SafeInvokeVoidAsync("window.blazorBootstrap.googlemaps.initialize", Id, Zoom, Center, Markers, Clickable, objRef));
-    }
-
     #endregion
 
     #region Properties, Indexers
@@ -116,7 +119,7 @@ private void OnScriptLoad()
     [Parameter] 
     public bool Clickable { get; set; }
 
-    private string? GoogleMapsJsFileUrl => $"https://maps.googleapis.com/maps/api/js?key={ApiKey}&libraries=maps,marker";
+    private string? GoogleMapsJsFileUrl => $"https://maps.googleapis.com/maps/api/js?key={ApiKey}&libraries=maps,marker&loading=async&callback=blazorBootstrap.googlemaps.onApiLoaded";
 
     /// <summary>
     /// Gets or sets the height of the <see cref="GoogleMap" />.

diff --git a/blazorbootstrap/Models/Maps/PinElement.cs b/blazorbootstrap/Models/Maps/PinElement.cs
@@ -4,20 +4,99 @@ public class PinElement
 {
     #region Properties, Indexers
 
-    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 
+    /// <summary>
+    /// Gets or sets the background color of the pin.
+    /// <para>
+    /// Default value is <see langword="null" />.
+    /// </para>
+    /// </summary>
+    [AddedVersion("3.0.0")]
+    [DefaultValue(null)]
+    [Description("Gets or sets the background color of the pin.")]
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
     public string? Background { get; set; }
 
-    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 
+    /// <summary>
+    /// Gets or sets the border color of the pin.
+    /// <para>
+    /// Default value is <see langword="null" />.
+    /// </para>
+    /// </summary>
+    [AddedVersion("3.0.0")]
+    [DefaultValue(null)]
+    [Description("Gets or sets the border color of the pin.")]
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
     public string? BorderColor { get; set; }
 
-    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 
+    /// <summary>
+    /// Gets or sets the legacy glyph content for the pin.
+    /// <para>
+    /// Default value is <see langword="null" />.
+    /// </para>
+    /// </summary>
+    [AddedVersion("3.0.0")]
+    [DefaultValue(null)]
+    [Description("Gets or sets the legacy glyph content for the pin.")]
+    [Obsolete("Use GlyphText or GlyphSrc instead.")]
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
     public object? Glyph { get; set; }
 
-    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 
+    /// <summary>
+    /// Gets or sets the color of the pin glyph.
+    /// <para>
+    /// Default value is <see langword="null" />.
+    /// </para>
+    /// </summary>
+    [AddedVersion("3.0.0")]
+    [DefaultValue(null)]
+    [Description("Gets or sets the color of the pin glyph.")]
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
     public string? GlyphColor { get; set; }
 
+    /// <summary>
+    /// Gets or sets the URL of the image displayed in the pin glyph.
+    /// <para>
+    /// Default value is <see langword="null" />.
+    /// </para>
+    /// </summary>
+    [AddedVersion("4.0.0")]
+    [DefaultValue(null)]
+    [Description("Gets or sets the URL of the image displayed in the pin glyph.")]
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public string? GlyphSrc { get; set; }
+
+    /// <summary>
+    /// Gets or sets the text displayed in the pin glyph.
+    /// <para>
+    /// Default value is <see langword="null" />.
+    /// </para>
+    /// </summary>
+    [AddedVersion("4.0.0")]
+    [DefaultValue(null)]
+    [Description("Gets or sets the text displayed in the pin glyph.")]
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public string? GlyphText { get; set; }
+
+    /// <summary>
+    /// Gets or sets the scale of the pin.
+    /// <para>
+    /// Default value is 1.0.
+    /// </para>
+    /// </summary>
+    [AddedVersion("3.0.0")]
+    [DefaultValue(1.0)]
+    [Description("Gets or sets the scale of the pin.")]
     public double Scale { get; set; } = 1.0;
 
+    /// <summary>
+    /// Gets or sets a value indicating whether the legacy glyph is an icon-font class.
+    /// <para>
+    /// Default value is <see langword="false" />.
+    /// </para>
+    /// </summary>
+    [AddedVersion("3.0.0")]
+    [DefaultValue(false)]
+    [Description("Gets or sets a value indicating whether the legacy glyph is an icon-font class.")]
     public bool UseIconFonts { get; set; }
 
     #endregion