The geolocation pin is not displayed on the map

I’m a novice developer. The third day I can’t understand what the problem is, I created an Aure Map, then I need to link it to the dynamics 365 fields, but the whole problem is that the map does not display a pin with geolocation, tell me what the problem is. My Code:

<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Azure Map Integration</title>
    <style>
      #myMap {
        height: 400px;
        width: 100%;
      }
    </style>
    <!-- Azure Maps SDK -->
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas-service.min.js"></script>
    <link
      rel="stylesheet"
      href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css"
      type="text/css"
    />
  </head>
  <body>
    <div id="myMap"></div>

    <script>
      let map, datasource, searchService, pushpin;

      // Initialize Azure Map
      function initMap() {
        map = new atlas.Map("myMap", {
          center: [-73.935242, 40.73061], // Default center (New York)
          zoom: 12,
          authOptions: {
            authType: "subscriptionKey",
            subscriptionKey:
              "api_key", // Replace with your Azure Maps key
          },
        });

        // Wait until the map resources are ready
        map.events.add("ready", function () {
          // Create a data source and add it to the map
          datasource = new atlas.source.DataSource();
          map.sources.add(datasource);

          // Create a search service for geocoding and reverse geocoding
          searchService = new atlas.service.SearchURL(map);

          // Try to get the user's current geolocation
          if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
              function (position) {
                const userLocation = [
                  position.coords.longitude,
                  position.coords.latitude,
                ];

                // Center the map at the user's location
                map.setCamera({
                  center: userLocation,
                  zoom: 15,
                });

                // Add a draggable pushpin at the user's location
                pushpin = new atlas.data.Feature(
                  new atlas.data.Point(userLocation),
                  {
                    draggable: true,
                  }
                );
                datasource.add(pushpin);

                // Create a symbol layer to render the pushpin
                const symbolLayer = new atlas.layer.SymbolLayer(
                  datasource,
                  null,
                  {
                    iconOptions: {
                      image: "pin-blue", // Azure Maps default pin
                      anchor: "center",
                      allowOverlap: true,
                    },
                  }
                );
                map.layers.add(symbolLayer);

                // Add dragend event listener to update form fields when pushpin is moved
                map.events.add("dragend", pushpin, function () {
                  const location = pushpin.geometry.coordinates;
                  reverseGeocode(location);
                });
              },
              function (error) {
                console.error("Geolocation error: " + error.message);
              }
            );
          } else {
            console.error("Geolocation is not supported by this browser.");
          }
        });
      }

      // Function to reverse geocode the pushpin position to update the Dynamics 365 fields
      function reverseGeocode(location) {
        searchService
          .reverseSearch(atlas.service.Aborter.timeout(10000), {
            query: location,
          })
          .then((response) => {
            const result = response.geojson.getFeatures();
            if (result.features.length > 0) {
              const address = result.features[0].properties.address;
              fillFormFields(address);
            }
          })
          .catch((error) => {
            console.log("Reverse geocode was not successful: " + error.message);
          });
      }

      // Function to fill Dynamics 365 fields based on reverse geocoding results
      function fillFormFields(address) {
        setFieldValue(
          "address1_line1",
          (address.streetName || "") + " " + (address.streetNumber || "")
        );
        setFieldValue("address1_city", address.municipality || "");
        setFieldValue("address1_stateorprovince", address.adminDistrict || "");
        setFieldValue("address1_postalcode", address.postalCode || "");
        setFieldValue("address1_country", address.countryRegion || "");
      }

      // Initialize the map on page load
      initMap();
    </script>
  </body>
</html>

I tried different things from azure map documentation to gpt the problem was not solved, the key if something is there and is also inscribed