Class RadzenGoogleMap
RadzenGoogleMap component.
Inherited Members
Namespace: Radzen.Blazor
Assembly: Radzen.Blazor.dll
Syntax
public class RadzenGoogleMap : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposableExamples
<RadzenGoogleMap Zoom="3" Center=@(new GoogleMapPosition() { Lat = 42.6977, Lng = 23.3219 }) MapClick=@OnMapClick MarkerClick=@OnMarkerClick">
<Markers>
<RadzenGoogleMapMarker Title="London" Label="London" Position=@(new GoogleMapPosition() { Lat = 51.5074, Lng = 0.1278 }) />
<RadzenGoogleMapMarker Title="Paris " Label="Paris" Position=@(new GoogleMapPosition() { Lat = 48.8566, Lng = 2.3522 }) />
</Markers>
</RadzenGoogleMap>
@code {
void OnMapClick(GoogleMapClickEventArgs args)
{
Console.WriteLine($"Map clicked at Lat: {args.Position.Lat}, Lng: {args.Position.Lng}");
}
void OnMarkerClick(RadzenGoogleMapMarker marker)
{
Console.WriteLine($"Map {marker.Title} marker clicked. Marker position -> Lat: {marker.Position.Lat}, Lng: {marker.Position.Lng}");
}
}Constructors
RadzenGoogleMap()
RadzenGoogleMap component.
Declaration
public RadzenGoogleMap()Examples
<RadzenGoogleMap Zoom="3" Center=@(new GoogleMapPosition() { Lat = 42.6977, Lng = 23.3219 }) MapClick=@OnMapClick MarkerClick=@OnMarkerClick">
<Markers>
<RadzenGoogleMapMarker Title="London" Label="London" Position=@(new GoogleMapPosition() { Lat = 51.5074, Lng = 0.1278 }) />
<RadzenGoogleMapMarker Title="Paris " Label="Paris" Position=@(new GoogleMapPosition() { Lat = 48.8566, Lng = 2.3522 }) />
</Markers>
</RadzenGoogleMap>
@code {
void OnMapClick(GoogleMapClickEventArgs args)
{
Console.WriteLine($"Map clicked at Lat: {args.Position.Lat}, Lng: {args.Position.Lng}");
}
void OnMarkerClick(RadzenGoogleMapMarker marker)
{
Console.WriteLine($"Map {marker.Title} marker clicked. Marker position -> Lat: {marker.Position.Lat}, Lng: {marker.Position.Lng}");
}
}Properties
ApiKey
Gets or sets the Google API key.
Declaration
[Parameter]
public string ApiKey { get; set; }Property Value
| Type | Description |
|---|---|
| string | The Google API key. |
Center
Gets or sets the center map position.
Declaration
[Parameter]
public GoogleMapPosition Center { get; set; }Property Value
| Type | Description |
|---|---|
| GoogleMapPosition | The center. |
Data
Gets or sets the data - collection of RadzenGoogleMapMarker.
Declaration
[Parameter]
public IEnumerable<RadzenGoogleMapMarker> Data { get; set; }Property Value
| Type | Description |
|---|---|
| IEnumerable<RadzenGoogleMapMarker> | The data. |
FitBoundsToMarkersOnUpdate
Flag indicating whether map will be zoomed to marker bounds on update or not.
Declaration
[Parameter]
public bool FitBoundsToMarkersOnUpdate { get; set; }Property Value
| Type | Description |
|---|---|
| bool |
MapClick
Gets or sets the map click callback.
Declaration
[Parameter]
public EventCallback<GoogleMapClickEventArgs> MapClick { get; set; }Property Value
| Type | Description |
|---|---|
| EventCallback<GoogleMapClickEventArgs> | The map click callback. |
MapId
Gets or sets the Google Map Id.
Declaration
[Parameter]
public string MapId { get; set; }Property Value
| Type | Description |
|---|---|
| string | The Google Map Id. |
MarkerClick
Gets or sets the marker click callback.
Declaration
[Parameter]
public EventCallback<RadzenGoogleMapMarker> MarkerClick { get; set; }Property Value
| Type | Description |
|---|---|
| EventCallback<RadzenGoogleMapMarker> | The marker click callback. |
Markers
Gets or sets the markers.
Declaration
[Parameter]
public RenderFragment Markers { get; set; }Property Value
| Type | Description |
|---|---|
| RenderFragment | The markers. |
Options
Gets or sets the Google map options: https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions.
Declaration
[Parameter]
public Dictionary<string, object> Options { get; set; }Property Value
| Type | Description |
|---|---|
| Dictionary<string, object> | The Google map options. |
Zoom
Gets or sets the zoom.
Declaration
[Parameter]
public double Zoom { get; set; }Property Value
| Type | Description |
|---|---|
| double | The zoom. |
Methods
AddMarker(RadzenGoogleMapMarker)
Adds the marker.
Declaration
public void AddMarker(RadzenGoogleMapMarker marker)Parameters
| Type | Name | Description |
|---|---|---|
| RadzenGoogleMapMarker | marker | The marker. |
BuildRenderTree(RenderTreeBuilder)
RadzenGoogleMap component.
Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)Parameters
| Type | Name | Description |
|---|---|---|
| RenderTreeBuilder | __builder |
Overrides
Dispose()
Detaches event handlers and disposes Reference.
Declaration
public override void Dispose()Overrides
GetComponentCssClass()
Gets the component CSS class.
Declaration
protected override string GetComponentCssClass()Returns
| Type | Description |
|---|---|
| string |
Overrides
OnAfterRenderAsync(bool)
Called by the Blazor runtime.
Declaration
protected override Task OnAfterRenderAsync(bool firstRender)Parameters
| Type | Name | Description |
|---|---|---|
| bool | firstRender |
Returns
| Type | Description |
|---|---|
| Task |
Overrides
OnMapClick(GoogleMapClickEventArgs)
Handles the MapClick event.
Declaration
[JSInvokable("RadzenGoogleMap.OnMapClick")]
public Task OnMapClick(GoogleMapClickEventArgs args)Parameters
| Type | Name | Description |
|---|---|---|
| GoogleMapClickEventArgs | args | The GoogleMapClickEventArgs instance containing the event data. |
Returns
| Type | Description |
|---|---|
| Task |
OnMarkerClick(RadzenGoogleMapMarker)
Called when marker click.
Declaration
[JSInvokable("RadzenGoogleMap.OnMarkerClick")]
public Task OnMarkerClick(RadzenGoogleMapMarker marker)Parameters
| Type | Name | Description |
|---|---|---|
| RadzenGoogleMapMarker | marker | The marker. |
Returns
| Type | Description |
|---|---|
| Task |
RemoveMarker(RadzenGoogleMapMarker)
Removes the marker.
Declaration
public void RemoveMarker(RadzenGoogleMapMarker marker)Parameters
| Type | Name | Description |
|---|---|---|
| RadzenGoogleMapMarker | marker | The marker. |