I decided to take a look at using the Azure Maps service to place a map in a Web page.

1. I launched Visual Studio 2022 (Community, free edition) and selected the “Continue without code” option.

2. I did File | New | File | HTML Page | Open and named it simplePage.html and saved it on my local machine.

3. I went to the Azure Portal site and signed in with my work account. If you don’t have an Azure account, be aware that setting up an Azure account is a huge pain in the rear.

4. I did Create a Resource, searched for Azure Maps, Create. I specified my work Subscription (billing entity), an existing Resource Group (an organizational entity), and named the Azure Maps Resource as Azure_Map_Demo, then did Create.

5. After the Maps resource was created, I went to the Authentication section and copied the Primary Key value — you need it to create a map in a Web page.

6. Back in Visual Studio, I typed in this code:

7. Note the subscriptionKey value from Azure Maps Primary Key.

8. I right-clicked in VS and selected View in Browser (Edge) option.

9. Voila. A Web page with a map.

Demo code with less-than and greater-than replaced by { and } so my blog editor doesn’t choke.

{!DOCTYPE html}
{html lang="en"}

{head}
  {title}Simple Azure Map Demo{/title}
   
  {script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"}{/script}
  {script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js"}{/script}

  {script}
    var map;
        
    function GetMap() {
      map = new atlas.Map('myMap', {
        //center: [-118.3, 34.0],  // Los Angeles
        center: [-122.0, 47.5],  // Issaquah, where I live
        zoom: 9,
        view: 'Auto',
        authOptions: {
          authType: 'subscriptionKey',
          subscriptionKey: 'VJfFqsRdbMJ3wGHlCqPwSuc8ysKrj4AYxxxxxxxxxxx'
        }
      });
    }
  {/script}

  {style}
    html, body { width: 100%; height: 100%;  }
    #myMap { position: relative; width: 100%; height: 100%; }
  {/style}
{/head}

{body onload="GetMap()"}
  {div id="myMap"}{/div}
{/body}

{/html}