title: Azure Maps Example
body: <p>I am trying to get the example code here: <a href="https://docs.microsoft.com/en-us/azure/azure-maps/how-to-use-map-control" rel="nofollow noreferrer">https://docs.microsoft.com/en-us/azure/azure-maps/how-to-use-map-control</a> of simply displaying a map and copy and pasted the code into a local virtual directory on my laptop running IIS.</p>
  
  <p>The code errors in two locations. The first is very puzzling to say the least:</p>
  
  <blockquote>
    <p>Line Number 1, Column 1: default.html:1:1
    XML Parsing Error: syntax error Location: <a href="http://localhost/azuremaps/default.html" rel="nofollow noreferrer">http://localhost/azuremaps/default.html</a></p>
  </blockquote>
  
  <p>The second error is:</p>
  
  <blockquote>
    <p>TypeError: atlas.map is not a constructor</p>
  </blockquote>
  
  <p>HTML code copied directly from a sample:</p>
  
  <pre><code>&lt;html&gt;
   &lt;head&gt;
      &lt;!-- Load in the Azure Maps Web SDK - Using CSS and JS --&gt;
      &lt;link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" /&gt;
      &lt;script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"&gt;&lt;/script&gt;
     &lt;!-- Add a reference to the Azure Maps Services Module JavaScript file. --&gt;
     &lt;script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="theMap"&gt;&lt;/div&gt;
      &lt;script type="text/javascript"&gt;
        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 () {
      });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>