Blazor Google Map
Blazor Bootstrap Google Map component will create maps to show locations anywhere in the world using the Google JavaScript API.
Prerequisite #
Before you start using the GoogleMap component in your project, you need an API key.
Please follow the link below for detailed steps.
Link: https://developers.google.com/maps/documentation/javascript/adding-a-google-map#key.
Examples #
This example demonstrates how to use a simple Google Map component.
@inherits GoogleMapDemoComponentBase
<GoogleMap ApiKey="@ApiKey"
Center="new GoogleMapCenter(-34.397, 150.644)"
Height="400"
Width="100"
Zoom="8" />Add a marker to a map #
This example demonstrates how to use a simple Google Map component with marker.
@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",
}
};
}Marker customization #
Scale the marker #
To scale a marker, use the PinElement.Scale option.
@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",
}
};
}Change the background color #
Use the PinElement.Background option to change the background color of a marker.
@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",
}
};
}Change the border color #
Use the PinElement.BorderColor option to change the border color of a marker.
@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",
}
};
}Change the glyph color #
Use the PinElement.GlyphColor option to change the glyph color of a marker.
@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",
}
};
}Hide the glyph #
Set the PinElement.Glyph option to an empty string to hide a marker's glyph.
@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",
}
};
}Use icon fonts #
Use the PinElement.UseIconFonts and PinElement.Glyph options to use the icon fonts.
@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",
}
};
}Markers with HTML and CSS #
@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()
{
Content = "<i class='bi bi-cloud-drizzle-fill fs-4 text-primary'></i>",
Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352),
Title = "Drizzle"
},
new GoogleMapMarker()
{
Content = "<i class='bi bi-cloud-lightning-rain-fill fs-4 text-danger'></i>",
Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727),
Title = "Lightning rain"
},
new GoogleMapMarker()
{
Content = "<i class='bi bi-cloud-rain-fill fs-4 text-dark'></i>",
Position = new GoogleMapMarkerPosition(37.39561833718522, -122.21855116258479),
Title = "Rain"
}
};
}Make a marker clickable #
This example shows you how to make markers respond to click events. To make a marker clickable:
Set the Clickable parameter to true.
@inherits GoogleMapDemoComponentBase
<GoogleMap ApiKey="@ApiKey"
Center="new GoogleMapCenter(37.43238031167444, -122.16795397128632)"
Height="400"
Width="100"
Zoom="10"
Markers="markers"
Clickable="true"
OnMarkerClick="OnGoogleMapMarkerClick" />
@code {
[Inject] public ToastService ToastService { get; set; } = default!;
private void OnGoogleMapMarkerClick(GoogleMapMarker marker)
{
ToastService.Notify(new ToastMessage(ToastType.Success, $"{marker.Title}", $"This is a toast message for a weather forecast. DateTime: {DateTime.Now}"));
}
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",
}
};
}Dynamic markers #
@inherits GoogleMapDemoComponentBase
<div>
<Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="(async () => await AddWeatherMarkerAsync())">
<Icon Name="IconName.GeoAltFill" /> Add Marker
</Button>
<Button Color="ButtonColor.Danger" Size="ButtonSize.Small" @onclick="(async () => await UpdateWeatherMarkersAsync())">
<Icon Name="IconName.GeoAltFill" /> Update Markers
</Button>
<Button Color="ButtonColor.Warning" Size="ButtonSize.Small" @onclick="(async () => await RefreshMapAsync())">
<Icon Name="IconName.MapFill" /> Refresh Map
</Button>
</div>
<GoogleMap @ref="googleMapRef"
ApiKey="@ApiKey"
Center="new GoogleMapCenter(37.43238031167444, -122.16795397128632)"
Height="400"
Width="100"
Zoom="10"
Markers="markers"
OnMarkerClick="OnGoogleMapMarkerClick" />
@code {
Random random = new Random(2000000000);
GoogleMap googleMapRef = default!;
[Inject] public ToastService ToastService { get; set; } = default!;
private async ValueTask AddWeatherMarkerAsync() => await googleMapRef.AddMarkerAsync(GetRandomMarker());
private async Task UpdateWeatherMarkersAsync()
{
var markerList = new List<GoogleMapMarker>
{
GetRandomMarker(),
GetRandomMarker(),
GetRandomMarker(),
GetRandomMarker(),
GetRandomMarker(),
GetRandomMarker(),
};
await googleMapRef.UpdateMarkersAsync(markerList);
}
private async Task RefreshMapAsync()
{
markers.Add(GetRandomMarker());
markers.Add(GetRandomMarker());
await googleMapRef.RefreshAsync();
}
private void OnGoogleMapMarkerClick(GoogleMapMarker marker)
{
ToastService.Notify(new ToastMessage(ToastType.Success, $"{marker.Title}", $"This is a toast message for a weather forecast. DateTime: {DateTime.Now}"));
}
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",
}
};
private GoogleMapMarker GetRandomMarker()
{
var lat = Double.Parse($"37.{random.Next()}");
var lng = Double.Parse($"-122.{random.Next()}");
return new GoogleMapMarker()
{
PinElement = new PinElement
{
Glyph = "bi bi-cloud-rain-heavy-fill fs-6 text-white",
UseIconFonts = true,
Background = ColorUtility.CategoricalTwelveColors[9].ToColor().ToRgbaString().ToLowerInvariant(),
BorderColor = ColorUtility.CategoricalTwelveColors[9].ToColor().ToRgbString().ToLowerInvariant()
},
Position = new GoogleMapMarkerPosition(lat, lng),
Title = "Heavy rain",
};
}
}