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",
            };
    }
}

If you like Blazor Bootstrap, give it a star on GitHub!

Blazor Bootstrap

Designed and built with all the love in the world by the Blazor Bootstrap team with the help of our contributors.
Code licensed Apache License 2.0.
Currently v3.0.0.