I created a billable account in order to generate a key that will work with the location API. I enabled all APIs to that key that seem relevant to my case. Then I started with a basic Add a Google Map to a Web Page tutorial example. I copied the code from the jsfiddle.net of that example to my own HTML, css, and javascript files. The fidddle.net runs the code with my own key, so I know that the key works. Unfortunately I can’t get the map to display in my HTML page.

The map not loading problem was reported many times here. I checked many of them and the errors found in some of those cases, like size missing in style or initMap() funciton not called doesn’t seem to apply to my case, and since the sample works with my key in jsfiddle.net I don’t believe that there is anything wrong with those files.

My development environment is Visual Studio 2022 and the web app is ASP.NET with RAZOR pages. Is there a compatiblity issue here?, I don’t see any errors in the console. All other pages display just fine in htpps://localhost:7244, but not https://localhost:7244/MapView. is the development mode port the problem?

Also tried a simple WinUI3 app with a WebView2 control to host the page, but got the same result. The map API must run from an HTTPS interface, so, to display the local HTML file in the WebView2 I use:

    public void NavToLocalSite(string htmlPage)
    {
        var sitePath = Path.GetDirectoryName(htmlPage);
        var page = Path.GetFileName(htmlPage);
        // WvMap is the WebView2 control
        WvMap.CoreWebView2.SetVirtualHostNameToFolderMapping("local",sitePath, CoreWebView2HostResourceAccessKind.DenyCors);
        WvMap.CoreWebView2.Navigate($"https://local/{page}");
    }

Either way I get the same result.