GoogleMap component (#843)

* GoogleMap component
vikramlearning · Aug 19, 2024 · 474e48b · 474e48b
1 parent 2fbd772
commit 474e48b
Show file tree

Hide file tree

Showing 27 changed files with 1,068 additions and 2 deletions.
diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs
@@ -37,6 +37,7 @@ internal override IEnumerable<NavItem> GetNavItems()
             new (){ Id = "508", Text = "Collapse", Href = "/collapse", IconName = IconName.ArrowsCollapse, ParentId = "5" },
             new (){ Id = "509", Text = "Confirm Dialog", Href = "/confirm-dialog", IconName = IconName.QuestionDiamondFill, ParentId = "5" },
             new (){ Id = "510", Text = "Dropdown", Href = "/dropdown", IconName = IconName.MenuButtonWideFill, ParentId = "5" },
+            new (){ Id = "510", Text = "Google Maps", Href = "/google-maps", IconName = IconName.Map, ParentId = "5" },
 
             #region Grid
 

diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor
@@ -105,6 +105,11 @@
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.MenuButtonWideFill" class="me-2" /> Dropdown</h4>
             </a>
         </div>
+        <div class="col-sm-4 mb-2">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/google-maps">
+                <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Map" class="me-2" /> Google Maps <Badge Color="BadgeColor.Danger">New</Badge></h4>
+            </a>
+        </div>
         <div class="col-sm-4 mb-2">
             <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/grid/overview">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Grid3X2" class="me-2" /> Grid <Badge Color="BadgeColor.Success">Updated</Badge></h4>

diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDemoComponentBase.cs b/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDemoComponentBase.cs
@@ -0,0 +1,14 @@
+namespace BlazorBootstrap.Demo.RCL;
+
+public class GoogleMapDemoComponentBase : ComponentBase
+{
+    public string ApiKey = default!;
+
+    [Inject] private IConfiguration Configuration { get; set; } = default!;
+
+    protected override void OnInitialized()
+    {
+        ApiKey = Configuration["GoogleMap:ApiKey"].ToString();
+        base.OnInitialized();
+    }
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDocumentation.razor
@@ -0,0 +1,67 @@
+@page "/google-maps"
+
+<PageTitle>@title</PageTitle>
+
+<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
+
+<h1>Blazor Google Map</h1>
+<div class="lead mb-3">
+    Blazor Bootstrap Google Map component will create maps to show locations anywhere in the world using the Google JavaScript API.
+</div>
+
+<CarbonAds />
+
+<SectionHeading Size="HeadingSize.H2" Text="Prerequisite" PageUrl="@pageUrl" HashTagName="prerequisite" />
+<div>
+    Before you start using the GoogleMap component in your project, you need an API key.
+    Please follow the link below for detailed steps.
+    <b>Link:</b> <a href="https://developers.google.com/maps/documentation/javascript/adding-a-google-map#key" target="_blank">https://developers.google.com/maps/documentation/javascript/adding-a-google-map#key</a>.
+</div>
+
+<SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
+<div class="mb-3">This example demonstrates how to use a simple Google Maps component.</div>
+<Demo Type="typeof(GoogleMap_Demo_01_Examples)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H2" Text="Add a marker to a map" PageUrl="@pageUrl" HashTagName="add-a-marker-to-a-map" />
+<div class="mb-3">This example demonstrates how to use a simple Google Maps component with marker.</div>
+<Demo Type="typeof(GoogleMap_Demo_02_Marker)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H2" Text="Marker customization" PageUrl="@pageUrl" HashTagName="marker-customization" />
+<SectionHeading Size="HeadingSize.H3" Text="Scale the marker" PageUrl="@pageUrl" HashTagName="scale-the-marker" />
+<div class="mb-3">To scale a marker, use the <b>PinElement.Scale</b> option.</div>
+<Demo Type="typeof(GoogleMap_Demo_03_Marker_Customization_A_Scale_the_marker)" Tabs="true" />
+<SectionHeading Size="HeadingSize.H3" Text="Change the background color" PageUrl="@pageUrl" HashTagName="change-the-background-color" />
+<div class="mb-3">Use the <b>PinElement.Background</b> option to change the background color of a marker.</div>
+<Demo Type="typeof(GoogleMap_Demo_03_Marker_Customization_B_Change_the_background_color)" Tabs="true" />
+<SectionHeading Size="HeadingSize.H3" Text="Change the border color" PageUrl="@pageUrl" HashTagName="change-the-border-color" />
+<div class="mb-3">Use the <b>PinElement.BorderColor</b> option to change the border color of a marker.</div>
+<Demo Type="typeof(GoogleMap_Demo_03_Marker_Customization_C_Change_the_border_color)" Tabs="true" />
+<SectionHeading Size="HeadingSize.H3" Text="Change the glyph color" PageUrl="@pageUrl" HashTagName="change-the-glyph-color" />
+<div class="mb-3">Use the <b>PinElement.GlyphColor</b> option to change the glyph color of a marker.</div>
+<Demo Type="typeof(GoogleMap_Demo_03_Marker_Customization_D_Change_the_glyph_color)" Tabs="true" />
+<SectionHeading Size="HeadingSize.H3" Text="Hide the glyph" PageUrl="@pageUrl" HashTagName="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>
+<Demo Type="typeof(GoogleMap_Demo_03_Marker_Customization_E_Hide_the_glyph)" Tabs="true" />
+<SectionHeading Size="HeadingSize.H3" Text="Use icon fonts" PageUrl="@pageUrl" HashTagName="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>
+<Demo Type="typeof(GoogleMap_Demo_03_Marker_Customization_F_Use_icon_fonts)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H2" Text="Markers with HTML and CSS" PageUrl="@pageUrl" HashTagName="markers-with-html-and-css" />
+<Demo Type="typeof(GoogleMap_Demo_04_Markers_with_HTML_and_CSS)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H2" Text="Make a marker clickable" PageUrl="@pageUrl" HashTagName="make-a-marker-clickable" />
+<div class="mb-3">
+    This example shows you how to make markers respond to click events. To make a marker clickable:
+    Set the <b>Clickable</b> parameter to <b>true</b>.
+</div>
+<Demo Type="typeof(GoogleMap_Demo_05_Make_a_marker_clickable)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H2" Text="Dynamic markers" PageUrl="@pageUrl" HashTagName="dynamic-markers" />
+<Demo Type="typeof(GoogleMap_Demo_06_Dynamic_markers)" Tabs="true" />
+
+@code {
+    private string pageUrl = "/google-maps";
+    private string title = "Blazor Google Map Component";
+    private string description = "Blazor Bootstrap Google Map component will create maps to show locations anywhere in the world using the Google JavaScript API.";
+    private string imageUrl = "https://i.imgur.com/AbyDP51.png";
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMap_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMap_Demo_01_Examples.razor
@@ -0,0 +1,7 @@
+@inherits GoogleMapDemoComponentBase
+
+<GoogleMap ApiKey="@ApiKey"
+           Center="new GoogleMapCenter(-34.397, 150.644)"
+           Height="400"
+           Width="100"
+           Zoom="8" />
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMap_Demo_02_Marker.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMap_Demo_02_Marker.razor
@@ -0,0 +1,24 @@
+@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()
+        { 
+            Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352) ,
+            Title = "Single family house with modern design", 
+        },
+        new GoogleMapMarker()
+        { 
+            Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727) ,
+            Title = "Townhouse with friendly neighbors",
+        }
+    };
+}
diff --git a/...RCL/Components/Pages/Maps/GoogleMap_Demo_03_Marker_Customization_A_Scale_the_marker.razor b/...RCL/Components/Pages/Maps/GoogleMap_Demo_03_Marker_Customization_A_Scale_the_marker.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{ Scale = 1.5  },
+            Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352) ,
+            Title = "Single family house with modern design",
+        },
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement{ Scale = 1.5  },
+            Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727) ,
+            Title = "Townhouse with friendly neighbors",
+        }
+    };
+}
diff --git a/...nts/Pages/Maps/GoogleMap_Demo_03_Marker_Customization_B_Change_the_background_color.razor b/...nts/Pages/Maps/GoogleMap_Demo_03_Marker_Customization_B_Change_the_background_color.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 = "#FBBC04",  },
+            Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352) ,
+            Title = "Single family house with modern design",
+        },
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement{ Background = "#FBBC04",  },
+            Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727) ,
+            Title = "Townhouse with friendly neighbors",
+        }
+    };
+}
diff --git a/...ponents/Pages/Maps/GoogleMap_Demo_03_Marker_Customization_C_Change_the_border_color.razor b/...ponents/Pages/Maps/GoogleMap_Demo_03_Marker_Customization_C_Change_the_border_color.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{ BorderColor = "#137333",  },
+            Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352) ,
+            Title = "Single family house with modern design",
+        },
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement{ BorderColor = "#137333",  },
+            Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727) ,
+            Title = "Townhouse with friendly neighbors",
+        }
+    };
+}
diff --git a/...mponents/Pages/Maps/GoogleMap_Demo_03_Marker_Customization_D_Change_the_glyph_color.razor b/...mponents/Pages/Maps/GoogleMap_Demo_03_Marker_Customization_D_Change_the_glyph_color.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{ GlyphColor = "white",  },
+            Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352) ,
+            Title = "Single family house with modern design",
+        },
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement{ GlyphColor = "white",  },
+            Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727) ,
+            Title = "Townhouse with friendly neighbors",
+        }
+    };
+}
diff --git a/...o.RCL/Components/Pages/Maps/GoogleMap_Demo_03_Marker_Customization_E_Hide_the_glyph.razor b/...o.RCL/Components/Pages/Maps/GoogleMap_Demo_03_Marker_Customization_E_Hide_the_glyph.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{ Glyph = "",  },
+            Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352) ,
+            Title = "Single family house with modern design",
+        },
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement{ Glyph = "",  },
+            Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727) ,
+            Title = "Townhouse with friendly neighbors",
+        }
+    };
+}
diff --git a/...o.RCL/Components/Pages/Maps/GoogleMap_Demo_03_Marker_Customization_F_Use_icon_fonts.razor b/...o.RCL/Components/Pages/Maps/GoogleMap_Demo_03_Marker_Customization_F_Use_icon_fonts.razor
@@ -0,0 +1,110 @@
+@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
+            {
+                Glyph = "bi bi-cloud-drizzle-fill fs-6 text-white",
+                UseIconFonts = true,
+                Background=ColorUtility.CategoricalSixColors[0].ToColor().ToRgbaString().ToLowerInvariant(),
+                BorderColor=ColorUtility.CategoricalSixColors[0].ToColor().ToRgbString().ToLowerInvariant()
+            },
+            Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352),
+            Title = "Drizzle",
+        },
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement
+            {
+                Glyph = "bi bi-cloud-drizzle-fill fs-6 text-white",
+                UseIconFonts = true,
+                Background=ColorUtility.CategoricalSixColors[0].ToColor().ToRgbaString().ToLowerInvariant(),
+                BorderColor=ColorUtility.CategoricalSixColors[0].ToColor().ToRgbString().ToLowerInvariant()
+            },
+            Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727),
+            Title = "Drizzle",
+        },
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement
+            {
+                Glyph = "bi bi-cloud-lightning-rain-fill fs-6 text-white",
+                UseIconFonts = true,
+                Background=ColorUtility.CategoricalSixColors[2].ToColor().ToRgbaString().ToLowerInvariant(),
+                BorderColor=ColorUtility.CategoricalSixColors[2].ToColor().ToRgbString().ToLowerInvariant()
+            },
+            Position = new GoogleMapMarkerPosition(37.39561833718522, -122.21855116258479),
+            Title = "Lightning rain",
+        },
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement
+            {
+                Glyph = "bi bi-cloud-lightning-rain-fill fs-6 text-white",
+                UseIconFonts = true,
+                Background=ColorUtility.CategoricalSixColors[2].ToColor().ToRgbaString().ToLowerInvariant(),
+                BorderColor=ColorUtility.CategoricalSixColors[2].ToColor().ToRgbString().ToLowerInvariant()
+            },
+            Position = new GoogleMapMarkerPosition(37.423928529779644, -122.1087629822001),
+            Title = "Lightning rain",
+        },
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement
+            {
+                Glyph = "bi bi-cloud-rain-fill fs-6 text-white",
+                UseIconFonts = true,
+                Background=ColorUtility.CategoricalSixColors[1].ToColor().ToRgbaString().ToLowerInvariant(),
+                BorderColor=ColorUtility.CategoricalSixColors[1].ToColor().ToRgbString().ToLowerInvariant()
+            },
+            Position = new GoogleMapMarkerPosition(37.40578635332598, -122.15043378466069),
+            Title = "Rain",
+        },
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement
+            {
+                Glyph = "bi bi-cloud-rain-fill fs-6 text-white",
+                UseIconFonts = true,
+                Background=ColorUtility.CategoricalSixColors[1].ToColor().ToRgbaString().ToLowerInvariant(),
+                BorderColor=ColorUtility.CategoricalSixColors[1].ToColor().ToRgbString().ToLowerInvariant()
+            },
+            Position = new GoogleMapMarkerPosition(37.36399747905774, -122.10465384268522),
+            Title = "Rain",
+        },
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement
+            {
+                Glyph = "bi bi-cloud-rain-heavy-fill fs-6 text-white",
+                UseIconFonts = true,
+                Background=ColorUtility.CategoricalSixColors[3].ToColor().ToRgbaString().ToLowerInvariant(),
+                BorderColor=ColorUtility.CategoricalSixColors[3].ToColor().ToRgbString().ToLowerInvariant()
+            },
+            Position = new GoogleMapMarkerPosition(37.38343706184458, -122.02340436985183),
+            Title = "Heavy rain",
+        },
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement
+            {
+                Glyph = "bi bi-cloud-rain-heavy-fill fs-6 text-white",
+                UseIconFonts = true,
+                Background=ColorUtility.CategoricalSixColors[3].ToColor().ToRgbaString().ToLowerInvariant(),
+                BorderColor=ColorUtility.CategoricalSixColors[3].ToColor().ToRgbString().ToLowerInvariant()
+            },
+            Position = new GoogleMapMarkerPosition(37.34576403052, -122.04455090047453),
+            Title = "Heavy rain",
+        }
+    };
+}