Custom component deprecated

App Building
4

Below is the simple code I put in an html file that worked and the same code inside the custom component.

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map with One Marker</title>
    <style>
      #map {
        height: 450px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script>
      async function initMap() {
        try {
          console.log("Initializing map...");
          // Request needed libraries.
          const { Map } = await google.maps.importLibrary("maps");
          console.log("Maps library loaded successfully.");

          const map = new Map(document.getElementById("map"), {
            center: { lat: 49.2655772, lng: -123.1315396 },
            zoom: 10,
          });
          console.log("Map initialized successfully.");

          // Create a simple marker (reverting back from AdvancedMarkerElement)
          new google.maps.Marker({
            position: { lat: 49.2655772, lng: -123.1315396 },
            map: map,
          });

          console.log("Marker added successfully.");
        } catch (error) {
          console.error("Error initializing map: ", error);
        }
      }

      function handleScriptLoadError() {
        console.error(
          "Failed to load Google Maps API script. Please check your API key and network connection."
        );
      }
    </script>

    <script>
      try {
        const mapScript = document.createElement("script");
        mapScript.src = `https://maps.googleapis.com/maps/api/js?key=myapikey&callback=initMap&v=weekly`;
        mapScript.async = true;
        mapScript.defer = true;
        mapScript.onerror = handleScriptLoadError;
        document.head.appendChild(mapScript);
        console.log("Google Maps API script added successfully.");
      } catch (error) {
        console.error("Error adding Google Maps API script: ", error);
      }
    </script>
  </body>
</html>