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.Map.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="https://github.com/rungwiroon/BlazorGoogleMaps/raw/master/_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

   
   @page "/map"
   @using GoogleMapsComponents
   @using GoogleMapsComponents.Maps

Google Map

@functions { private GoogleMap _map1; private MapOptions mapOptions;

protected override void OnInitialized()
{
    mapOptions = new MapOptions()
    {
        Zoom = 13,
        Center = new LatLngLiteral()
        {
            Lat = 13.505892,
            Lng = 100.8162
        },
        MapTypeId = MapTypeId.Roadmap
    };
}

 private async Task AfterMapRender()
 {
     _bounds = await LatLngBounds.CreateAsync(_map1.JsRuntime);
 }      

}

## Samples
 Please check server side samples https://github.com/rungwiroon/BlazorGoogleMaps/tree/master/ServerSideDemo which are most to date

 ClientSide demos online
 https://rungwiroon.github.io/BlazorGoogleMaps/mapEvents

**Breaking change from 4.0.0**
Migrate to .NET 8 #286.

**Breaking change from 3.0.0**
Migrate from Newtonsoft.Json to System.Text.Json.

**Breaking change from 2.0.0**
LatLngLiteral constructor's parameters order changed #173