Google Map

Google Map component will create maps to show locations anywhere in the world using the Google JavaScript API.

API Documentation

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 Maps 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 Maps 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 {
    private void OnGoogleMapMarkerClick(GoogleMapMarker marker)
    {
        // do something
    }

    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!;

    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)
    {
        // do something
    }

    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 BlazorExpress.Bulma, give it a star on GitHub!