Svelte example for google map js api

Map.svelte

<script>
    import { onMount } from 'svelte';
    import { Loader } from '@googlemaps/js-api-loader';
    import { AlarmClock } from 'lucide-svelte'
  
    let map;
    let mapOptions = {
      center: { lat: 19.9105, lng: 99.8406 }, // Default center (adjust as needed)
      zoom: 8,
      mapId: 'hellome',
    };
    let data = [
      { lat: 19.9125, lng: 99.8404, title: "Point 1" },
      { lat:  19.9100, lng: 99.8424, title: "Point 2" },
    ];
    let markers = [];
    let addingMarker = false;
  
    onMount(async () => {
      const loader = new Loader({
        apiKey: '[GENKEY]',
        version: 'weekly',
        libraries: ['places'] 
      });
  
      await loader.load();
  
      map = new google.maps.Map(document.getElementById('map'), mapOptions);
      const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker")

      const alarm = document.getElementById("alarm-svg");
      const parser = new DOMParser();
      const pinSvg =
        parser.parseFromString(alarm.innerHTML, 'image/svg+xml').documentElement;
      const pin =  document.createElement('div');
      pin.className = "marker-custom";
      pin.innerHTML = alarm.innerHTML;
      data.forEach(point => {
        const marker = new AdvancedMarkerElement({
          position: point,
          map: map,
          content: pin,
          title: point.title,
          gmpClickable: true,
        });
        markers.push(marker);
        marker.addListener('click', ({domEvent, latLng }) => {
            console.log("Hello")
            const { target } = domEvent;
            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
            });
      });
    });

    function clearMarkers() {
        markers.forEach(marker => marker.setMap(null)); // Remove markers from map
        markers = []; // Clear the markers array
    }
    function addMarker() {
        addingMarker = true; // Enter "add marker" mode

        const listener = map.addListener('click', (event) => {
            const newMarker = new google.maps.Marker({
                position: event.latLng,
                map: map
            });
            markers.push(newMarker);

            addingMarker = false; // Exit "add marker" mode
            google.maps.event.removeListener(listener); // Remove the click listener
        });
    }
  </script>
  
  <div id="map" style="height: 400px;"></div>

  <button on:click={clearMarkers}>Clear Markers</button> 

  <button on:click={addMarker} disabled={addingMarker}>
    {#if addingMarker}
        Click on the map to add a marker
    {:else}
        Add Marker
    {/if}
</button>

<div class="hidden" id="alarm-svg"><AlarmClock /> </div>

<style>
    .hidden {
        display: none;
    }
    
</style>