Map does not appear on page, but title and directions show up

I’m having trouble getting this plugin to work. I have a valid API key that I’ve used on other map plugins

When I place the shortcode on my page, I can get the map title and directions to appear, but the map itself never shows up. Tested in Chrome and Edge. There are no javascript errors in the developer tools.

This is all I see:
https://i.imgur.com/HF1G5Cd.png

I can also get directions to show, but no map:
https://i.imgur.com/OrFezy1.png

The shortcode is working, this is the source code created (I <removed> private location info):

<p>
	<h1 class=''>Office Location</h1>        
	<script type="text/javascript">
		google.maps.event.addDomListener(window, 'load', function () {
			var map = new google.maps.Map(document.getElementById("srm_gmp_embed_1"), {
				center: new google.maps.LatLng(<removed>,<removed>),
				zoom:13,
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				scrollwheel: '1'
			});

			// To view directions form and data
							//=========Direction view end

			var marker = new google.maps.Marker({
				position: new google.maps.LatLng(<removed>,<removed>),
				map: map,
				animation: google.maps.Animation.DROP
			});
			marker.setMap(map);
							var infowindow = new google.maps.InfoWindow({
				content: "<address removed>"
			});
			infowindow.open(map, marker);
			google.maps.event.addListener(marker, 'click', function () {
				infowindow.open(map, marker);
			});
			
		});
	</script>

	<div id="srm_gmp_embed_1"
		 style="width:100% !important;height:400  !important;margin:5px 0; ">
	</div>
</p>

I’m hosting on localhost right now so I can’t provide a link for testing.

I am using the plugin with the Lite version of this theme: https://organicthemes.com/theme/natural-theme/

Any ideas?

Thanks