Azure Maps Example

I am trying to get the example code here: https://learn.microsoft.com/en-us/azure/azure-maps/how-to-use-map-control of simply displaying a map and copy and pasted the code into a local virtual directory on my laptop running IIS.

The code errors in two locations. The first is very puzzling to say the least:

Line Number 1, Column 1: default.html:1:1 XML Parsing Error: syntax error Location: http://localhost/azuremaps/default.html

The second error is:

TypeError: atlas.map is not a constructor

HTML code copied directly from a sample:

<html>
 <head>
    <!-- Load in the Azure Maps Web SDK - Using CSS and JS -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
   <!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
   <script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js"></script>
  </head>

<body>
  <div id="theMap"></div>
    <script type="text/javascript">
      map = new atlas.map('theMap', {
        // Only allow one copy of the world be rendered when zoomed out.
        renderWorldCopies: false,
        language: 'en-US',
        center: [-122.3353, 47.6038],
        zoom: 12,
        view: 'auto',
        style: 'road',
        authOptions: {
            authType: 'subscriptionKey',
            subscriptionKey: 'mySubKey',
            getToken: function(resolve, reject, map) {
                fetch(url).then(function(response) {
                    return response.text();
                }).then(function(token) {
                    resolve(token);
                });
            }
        }
    });

    // Wait until the map resources are ready.
    map.events.add('ready', function () {
    });
</script>
</body>
</html>

Solution

Typo, Use map = new atlas.Map('theMap', Here M is in capital letter