Putting custom html/js page into Elementor as it's own block

Question

I have a working custom html/javascript page that I created and then FTPd into my wordpress site as a custom template which I'm applying to a blank page. However, I have elementor pro and though I may want to add other elements on this page that could be edited by others in the future.

I know there's an HTML option in elementor but it doesn't seem to work if I paste this into it.

Is there a way to get this put into a block on my elementor page so that the rest of the page can be designed as usual in elementor?

<div class="container" style="width:80%; margin:0 auto; height:500px; border:1px solid black;margin-top:40px; border-radius:18px;">
  <div class="row">
    <div class="col-lg-6">
        <div style="padding-top:35px; margin-bottom:20px;">
          <input id="textSearch" type="text" name="locationSearch" placeholder="search" style="border-radius:18px; padding:4px; width: 100%;" onKeyUp="searchStores(this.value)" />
        </div>
      <div id="stores-list" class="stores-list">

      </div>
    </div>
    <div class="col-lg-6">
      <div id="map" style="margin-top:20px; border-radius:18px;">
        
      </div>
    </div>
  </div>
</div>


<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

<script type="text/javascript">
var map;
var markers = [];

var locationSelect;
var activeInfoWindow; 


let stores = [{
    "recommendation": {},
    "storeNumber": "5758-13907",
    "id": "15051",
    "name": "La Cienega & Gregory Way",
    "phoneNumber": "310-659-9562",
    }, {
    "recommendation": {},
    "storeNumber": "5577-1851",
    "id": "14753",
    "name": "Fairfax & Olympic",
    "phoneNumber": "(323) 634-7845",
    }];

function initMap() {
    var losAngeles = { lat: 34.063380, lng: -118.358080 };
    map = new google.maps.Map(document.getElementById('map'), {
        center: losAngeles,
        zoom: 11,
        styles:[
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
  {
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#bdbdbd"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#eeeeee"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "poi.business",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#ffffff"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#dadada"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "featureType": "road.local",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "transit",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#eeeeee"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#c9c9c9"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  }
]
    });
    
    /*showStoreMarkers();*/
    
    

};

function clearLocations() {
  infoWindow.close();
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
  markers.length = 0;
}

function showStoreMarkers() {

    stores.forEach(function(store, index) {
        var latlng = new google.maps.LatLng(
            store.coordinates.latitude,
            store.coordinates.longitude
        );
        var name = store.name;
        var address = store.addressLines[0];
        createMarker(latlng, name, address);
    });
};

function setOnClickListener() {
    var storeELements = document.querySelectorAll('.store-container');
    storeELements.forEach(function(element,index) {
      element.addEventListener('click', function() {
      new google.maps.event.trigger(markers[index], 'click');
      });
    });
};



function searchStores() {
  var foundStores = [];
  var value = document.getElementById('textSearch').value;
  
  console.log(value);
  
  if(value){
    stores.forEach(function (store,index) {
      var id = store.id;
      console.log(id);
      if(id == value){
        foundStores.push(store);
      };
    });
  }else{
    foundStores = stores;
  }

  /*clearLocations();*/
  displayStores(foundStores);
  showStoreMarkers(foundStores);
  setOnClickListener();
};


function createMarker(latlng, name, address) {
    var infoWindow = new google.maps.InfoWindow();
    var marker = new google.maps.Marker({
        map: map,
        position: latlng,
        animation: google.maps.Animation.DROP,
        icon:'https://api.geoapify.com/v1/icon/?type=material&color=%23c524ff&icon=public&noWhiteCircle&apiKey=443526b60ca64c558f1276983013c2d8',
   // adding custom icons (Here I used a Flash logo marker)
         draggarble: false,// If set to true you can drag the marker
        clickable: true,
        title: name,
        zIndex: 1
    });
    
    google.maps.event.addListener(marker, 'click', function () {
        var iwHtml = "<div style='width:auto; text-align: center;'>" + name + "</div>";
        infoWindow.close();
         infoWindow.setOptions({
         content: iwHtml
         });
         if (activeInfoWindow) { activeInfoWindow.close();}
         infoWindow.open(map, marker);
         activeInfoWindow = infoWindow;
     });
    markers.push(marker);
    return marker;
    };
    
    $('.map-trigger').on('click', function(event) {
      event.preventDefault();
      marker = markers[this.id];
      var content = $(this).find('.content').html();
      infoWindow.close();
      infoWindow.setOptions({
        pixelOffset: new google.maps.Size(0, -40)
      });
      infoWindow.setContent("<div style='width:auto; text-align: center;'>" + name + "</div>");
      infoWindow.open(map /*,  marker */ );
    });
    


function displayStores(stores){
  var storesHtml = '';
  stores.forEach(function (store, index) {
    var address = store.addressLines;
    var name = store.name;
    var id = store.id;
    storesHtml += `
        <div class="store-container" style="margin-bottom:15px;">
          <div class="row">
            <div class="col-lg-6">
              <img src="https://via.placeholder.com/150">
            </div>
            <div class="col-lg-6">
              <div style="display:flex;">
                <div>Popular</div>
                <div>Premium</div>
              </div>
              <div class="name">
                <a class="map-trigger" href="#">${name}</a>
                <p>${id}</p>
              </div>
              <div class="store-address">
                <span>${address[0]}</span>
                <span>${address[1]}</span>
              </div>
              <div style="display:flex">
                <div class="stars">*****</div>
                <div class="price">976K</div>
              </div>
            </div>
          </div>
        </div>
    `
  });
  document.querySelector('.stores-list').innerHTML = storesHtml
}
</script>