Skip to content

Commit 474e48b

Browse files
gvreddy04gvreddy04
authored
GoogleMap component (#843)
* GoogleMap component
1 parent 2fbd772 commit 474e48b

27 files changed

+1068
-2
lines changed

‎BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ internal override IEnumerable<NavItem> GetNavItems()
3737
new (){ Id = "508", Text = "Collapse", Href = "/collapse", IconName = IconName.ArrowsCollapse, ParentId = "5" },
3838
new (){ Id = "509", Text = "Confirm Dialog", Href = "/confirm-dialog", IconName = IconName.QuestionDiamondFill, ParentId = "5" },
3939
new (){ Id = "510", Text = "Dropdown", Href = "/dropdown", IconName = IconName.MenuButtonWideFill, ParentId = "5" },
40+
new (){ Id = "510", Text = "Google Maps", Href = "/google-maps", IconName = IconName.Map, ParentId = "5" },
4041

4142
#region Grid
4243

‎BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,11 @@
105105
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.MenuButtonWideFill" class="me-2" /> Dropdown</h4>
106106
</a>
107107
</div>
108+
<div class="col-sm-4 mb-2">
109+
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/google-maps">
110+
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Map" class="me-2" /> Google Maps <Badge Color="BadgeColor.Danger">New</Badge></h4>
111+
</a>
112+
</div>
108113
<div class="col-sm-4 mb-2">
109114
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/grid/overview">
110115
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Grid3X2" class="me-2" /> Grid <Badge Color="BadgeColor.Success">Updated</Badge></h4>

‎BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDemoComponentBase.cs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
namespace BlazorBootstrap.Demo.RCL;
2+
3+
public class GoogleMapDemoComponentBase : ComponentBase
4+
{
5+
public string ApiKey = default!;
6+
7+
[Inject] private IConfiguration Configuration { get; set; } = default!;
8+
9+
protected override void OnInitialized()
10+
{
11+
ApiKey = Configuration["GoogleMap:ApiKey"].ToString();
12+
base.OnInitialized();
13+
}
14+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDocumentation.razor‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
@page "/google-maps"
2+
3+
<PageTitle>@title</PageTitle>
4+
5+
<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
6+
7+
<h1>Blazor Google Map</h1>
8+
<div class="lead mb-3">
9+
Blazor Bootstrap Google Map component will create maps to show locations anywhere in the world using the Google JavaScript API.
10+
</div>
11+
12+
<CarbonAds />
13+
14+
<SectionHeading Size="HeadingSize.H2" Text="Prerequisite" PageUrl="@pageUrl" HashTagName="prerequisite" />
15+
<div>
16+
Before you start using the GoogleMap component in your project, you need an API key.
17+
Please follow the link below for detailed steps.
18+
<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>.
19+
</div>
20+
21+
<SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
22+
<div class="mb-3">This example demonstrates how to use a simple Google Maps component.</div>
23+
<Demo Type="typeof(GoogleMap_Demo_01_Examples)" Tabs="true" />
24+
25+
<SectionHeading Size="HeadingSize.H2" Text="Add a marker to a map" PageUrl="@pageUrl" HashTagName="add-a-marker-to-a-map" />
26+
<div class="mb-3">This example demonstrates how to use a simple Google Maps component with marker.</div>
27+
<Demo Type="typeof(GoogleMap_Demo_02_Marker)" Tabs="true" />
28+
29+
<SectionHeading Size="HeadingSize.H2" Text="Marker customization" PageUrl="@pageUrl" HashTagName="marker-customization" />
30+
<SectionHeading Size="HeadingSize.H3" Text="Scale the marker" PageUrl="@pageUrl" HashTagName="scale-the-marker" />
31+
<div class="mb-3">To scale a marker, use the <b>PinElement.Scale</b> option.</div>
32+
<Demo Type="typeof(GoogleMap_Demo_03_Marker_Customization_A_Scale_the_marker)" Tabs="true" />
33+
<SectionHeading Size="HeadingSize.H3" Text="Change the background color" PageUrl="@pageUrl" HashTagName="change-the-background-color" />
34+
<div class="mb-3">Use the <b>PinElement.Background</b> option to change the background color of a marker.</div>
35+
<Demo Type="typeof(GoogleMap_Demo_03_Marker_Customization_B_Change_the_background_color)" Tabs="true" />
36+
<SectionHeading Size="HeadingSize.H3" Text="Change the border color" PageUrl="@pageUrl" HashTagName="change-the-border-color" />
37+
<div class="mb-3">Use the <b>PinElement.BorderColor</b> option to change the border color of a marker.</div>
38+
<Demo Type="typeof(GoogleMap_Demo_03_Marker_Customization_C_Change_the_border_color)" Tabs="true" />
39+
<SectionHeading Size="HeadingSize.H3" Text="Change the glyph color" PageUrl="@pageUrl" HashTagName="change-the-glyph-color" />
40+
<div class="mb-3">Use the <b>PinElement.GlyphColor</b> option to change the glyph color of a marker.</div>
41+
<Demo Type="typeof(GoogleMap_Demo_03_Marker_Customization_D_Change_the_glyph_color)" Tabs="true" />
42+
<SectionHeading Size="HeadingSize.H3" Text="Hide the glyph" PageUrl="@pageUrl" HashTagName="hide-the-glyph" />
43+
<div class="mb-3">Set the <b>PinElement.Glyph</b> option to an empty string to hide a marker's glyph.</div>
44+
<Demo Type="typeof(GoogleMap_Demo_03_Marker_Customization_E_Hide_the_glyph)" Tabs="true" />
45+
<SectionHeading Size="HeadingSize.H3" Text="Use icon fonts" PageUrl="@pageUrl" HashTagName="use-icon-fonts" />
46+
<div class="mb-3">Use the <b>PinElement.UseIconFonts</b> and <b>PinElement.Glyph</b> options to use the icon fonts.</div>
47+
<Demo Type="typeof(GoogleMap_Demo_03_Marker_Customization_F_Use_icon_fonts)" Tabs="true" />
48+
49+
<SectionHeading Size="HeadingSize.H2" Text="Markers with HTML and CSS" PageUrl="@pageUrl" HashTagName="markers-with-html-and-css" />
50+
<Demo Type="typeof(GoogleMap_Demo_04_Markers_with_HTML_and_CSS)" Tabs="true" />
51+
52+
<SectionHeading Size="HeadingSize.H2" Text="Make a marker clickable" PageUrl="@pageUrl" HashTagName="make-a-marker-clickable" />
53+
<div class="mb-3">
54+
This example shows you how to make markers respond to click events. To make a marker clickable:
55+
Set the <b>Clickable</b> parameter to <b>true</b>.
56+
</div>
57+
<Demo Type="typeof(GoogleMap_Demo_05_Make_a_marker_clickable)" Tabs="true" />
58+
59+
<SectionHeading Size="HeadingSize.H2" Text="Dynamic markers" PageUrl="@pageUrl" HashTagName="dynamic-markers" />
60+
<Demo Type="typeof(GoogleMap_Demo_06_Dynamic_markers)" Tabs="true" />
61+
62+
@code {
63+
private string pageUrl = "/google-maps";
64+
private string title = "Blazor Google Map Component";
65+
private string description = "Blazor Bootstrap Google Map component will create maps to show locations anywhere in the world using the Google JavaScript API.";
66+
private string imageUrl = "https://i.imgur.com/AbyDP51.png";
67+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMap_Demo_01_Examples.razor‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@inherits GoogleMapDemoComponentBase
2+
3+
<GoogleMap ApiKey="@ApiKey"
4+
Center="new GoogleMapCenter(-34.397, 150.644)"
5+
Height="400"
6+
Width="100"
7+
Zoom="8" />

‎BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMap_Demo_02_Marker.razor‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@inherits GoogleMapDemoComponentBase
2+
3+
<GoogleMap ApiKey="@ApiKey"
4+
Center="new GoogleMapCenter(37.43238031167444, -122.16795397128632)"
5+
Height="400"
6+
Width="100"
7+
Zoom="10"
8+
Markers="markers" />
9+
10+
@code {
11+
List<GoogleMapMarker> markers = new()
12+
{
13+
new GoogleMapMarker()
14+
{
15+
Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352) ,
16+
Title = "Single family house with modern design",
17+
},
18+
new GoogleMapMarker()
19+
{
20+
Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727) ,
21+
Title = "Townhouse with friendly neighbors",
22+
}
23+
};
24+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMap_Demo_03_Marker_Customization_A_Scale_the_marker.razor‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@inherits GoogleMapDemoComponentBase
2+
3+
<GoogleMap ApiKey="@ApiKey"
4+
Center="new GoogleMapCenter(37.43238031167444, -122.16795397128632)"
5+
Height="400"
6+
Width="100"
7+
Zoom="10"
8+
Markers="markers" />
9+
10+
@code {
11+
List<GoogleMapMarker> markers = new()
12+
{
13+
new GoogleMapMarker()
14+
{
15+
PinElement = new PinElement{ Scale = 1.5 },
16+
Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352) ,
17+
Title = "Single family house with modern design",
18+
},
19+
new GoogleMapMarker()
20+
{
21+
PinElement = new PinElement{ Scale = 1.5 },
22+
Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727) ,
23+
Title = "Townhouse with friendly neighbors",
24+
}
25+
};
26+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMap_Demo_03_Marker_Customization_B_Change_the_background_color.razor‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@inherits GoogleMapDemoComponentBase
2+
3+
<GoogleMap ApiKey="@ApiKey"
4+
Center="new GoogleMapCenter(37.43238031167444, -122.16795397128632)"
5+
Height="400"
6+
Width="100"
7+
Zoom="10"
8+
Markers="markers" />
9+
10+
@code {
11+
List<GoogleMapMarker> markers = new()
12+
{
13+
new GoogleMapMarker()
14+
{
15+
PinElement = new PinElement{ Background = "#FBBC04", },
16+
Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352) ,
17+
Title = "Single family house with modern design",
18+
},
19+
new GoogleMapMarker()
20+
{
21+
PinElement = new PinElement{ Background = "#FBBC04", },
22+
Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727) ,
23+
Title = "Townhouse with friendly neighbors",
24+
}
25+
};
26+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMap_Demo_03_Marker_Customization_C_Change_the_border_color.razor‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@inherits GoogleMapDemoComponentBase
2+
3+
<GoogleMap ApiKey="@ApiKey"
4+
Center="new GoogleMapCenter(37.43238031167444, -122.16795397128632)"
5+
Height="400"
6+
Width="100"
7+
Zoom="10"
8+
Markers="markers" />
9+
10+
@code {
11+
List<GoogleMapMarker> markers = new()
12+
{
13+
new GoogleMapMarker()
14+
{
15+
PinElement = new PinElement{ BorderColor = "#137333", },
16+
Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352) ,
17+
Title = "Single family house with modern design",
18+
},
19+
new GoogleMapMarker()
20+
{
21+
PinElement = new PinElement{ BorderColor = "#137333", },
22+
Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727) ,
23+
Title = "Townhouse with friendly neighbors",
24+
}
25+
};
26+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMap_Demo_03_Marker_Customization_D_Change_the_glyph_color.razor‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@inherits GoogleMapDemoComponentBase
2+
3+
<GoogleMap ApiKey="@ApiKey"
4+
Center="new GoogleMapCenter(37.43238031167444, -122.16795397128632)"
5+
Height="400"
6+
Width="100"
7+
Zoom="10"
8+
Markers="markers" />
9+
10+
@code {
11+
List<GoogleMapMarker> markers = new()
12+
{
13+
new GoogleMapMarker()
14+
{
15+
PinElement = new PinElement{ GlyphColor = "white", },
16+
Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352) ,
17+
Title = "Single family house with modern design",
18+
},
19+
new GoogleMapMarker()
20+
{
21+
PinElement = new PinElement{ GlyphColor = "white", },
22+
Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727) ,
23+
Title = "Townhouse with friendly neighbors",
24+
}
25+
};
26+
}

0 commit comments

Comments
 (0)