BlazorGoogleMaps

Blazor interop for GoogleMap library

Usage

1. Provide your Google API key to BlazorGoogleMaps with one of the following methods. (You can get a key here: https://developers.google.com/maps/documentation/javascript/get-api-key)

Use the bootstrap loader with a key service (recommended):

services.AddBlazorGoogleMaps("YOUR_KEY_GOES_HERE");

OR specify google api libraries and/or version:

services.AddBlazorGoogleMaps(new GoogleMapsComponents.Maps.MapApiLoadOptions("YOUR_KEY_GOES_HERE") { Version = "beta", Libraries = "places,visualization,drawing,marker", });

OR to do something more complex (e.g. looking up keys asynchronously), implement a Scoped key service and add it with something like:

services.AddScoped<IBlazorGoogleMapsKeyService, YourServiceImplementation>();

OR (legacy - not recommended) Add google map script HEAD tag to wwwroot/index.html in Client side or _Host.cshtml in Server Side.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_GOES_HERE&v=3"></script>

2. Add path to project javascript functions file in wwwroot/index.html for Blazor WASM, or in _Host.cshtml or _HostLayout.cshtml for Blazor Server.

<script src="_content/BlazorGoogleMaps/js/objectManager.js"></script>

If you want to use marker clustering add this script as well:

<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>

3. Using the component is the same for both Blazor WASM and Blazor Server