Since the standard weebly drag and drop google map won't work for what I'm trying to do. I pulled code from https://developers.google.com/maps/documentation/javascript/shapes#polygons in order to integrate a map and add an overlay showing a specific area. The code is listed below. This allows me to see the map and overlay on the editing side of the site but after publishing the site nothing shows up. If I attempt to add anothevver overlay the whole map doesn't show even on the editing side.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html, body {
height: 400;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 25.731751, lng: -80.162037},
zoom: 17});
var polygonCoords = [
{lat: 25.732376, lng: -80.160720},
{lat: 25.732093, lng: -80.160394},
{lat: 25.731341, lng: -80.161834},
{lat: 25.731134, lng: -80.164724},
{lat: 25.731373, lng: -80.164737},
{lat: 25.731453, lng: -80.164291},
{lat: 25.731568, lng: -80.163293},
{lat: 25.731608, lng: -80.163041},
{lat: 25.731632, lng: -80.162277}];
var RSMASPolygon = new google.maps.Polygon({
paths: polygonCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.5,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35});
RSMASPolygon.setMap(map);}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAg86fj-j-4hbLgJq6_NlIsrcWRe80DPbM&callback=initMap"
async defer>
</script>
</body>
</html>
