|     Documentation    |     Premium Support

Blazor. Google map overlay

I tried create google map overlay for Blazor app

public partial class HomePage : ComponentBase
private GeoCollection googleMap = new GeoCollection();
private MapView mapView = new MapView();

   protected async override Task OnInitializedAsync()
        var google = new GoogleMapsLayer
                            ApiKey = "ApiKey",
                            Projection = new Projection
                                Srid = 4326,
                                ProjString = Projection.GetGoogleMapProjString()
                            IsVisible = true,
                            MapType = GoogleMapsMapType.RoadMap
        await base.OnInitializedAsync();


<MapView Id=“map” MapUnit=“ThinkGeo.Core.GeographyUnit.Meter” Center="@(new PointShape(-11037792.463030849, 4953010.053845501))"
Zoom=“5” @ref="@mapView" >

But I have a result with empty screen

I dont know what a problem, I dont have any errors. Maybe anyone know how to create google map overlay for blazor app?


1, Please make sure the mapView’s unit is set to Meter.
mapView.MapUnite = GeographyUnit.Meter

  1. Comment out the Projection part in GoogleMapsLayer initialization.
    var google = new GoogleMapsLayer()

         APIKey = "apiKey"
         // The Projection property is a bit confusing here. GoogleLayer's Projection is fixed and it's supposed to be read only
         //Projection = new Projection
         //    Srid = 4326,
         //    ProjString = Projection.GetGoogleMapProjString()
         // it's visible by default anyway
         // IsVisible = true,
         MapType = GoogleMapsMapType.RoadMap

It will work. If still nothing shows up on the map, please replace GoogleMapsLayer with OpenStreetMapLayer see if that works. If it does, that means your code is correct and it’s the APIKey not working.

By the way, did you get the email from ThinkGeo Support team? We had some questions for you which would make us better assist you .