Hi @grandtheftpixel, so I was able to duplicate your attempt and got map to work:
http://google-map-demo.webflow.com/
And this is how I did it:
a) add some div block where you want the map to be displayed on your page, within some container or not, it is up to you. Give the div block an id of “map” and give it a class name of “mapDisplay”. Then on the div, give it some width and height, whatever you want, I used the example width and height of 960px x 500px, and to demonstrate, I also added some box shadow and made border radius of 10px to give it a little cool rounded effect 
So you can still style the map container the div with id “map”
b) Copy the following code and add it to the Before Body section of the Custom code tab of your website in the site settings page:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBbbwnrnCAoW9hfVyhoh7FFQRcA8VOkm-s&sensor=false"></script>
<script type="text/javascript">
// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);
function init() {
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 11,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(40.6700, -73.9400), // New York
// How you would like to style the map.
// This is where you would paste any style found on Snazzy Maps.
styles: [{featureType:"landscape",stylers:[{saturation:-100},{lightness:65},{visibility:"on"}]},{featureType:"poi",stylers:[{saturation:-100},{lightness:51},{visibility:"simplified"}]},{featureType:"road.highway",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"road.arterial",stylers:[{saturation:-100},{lightness:30},{visibility:"on"}]},{featureType:"road.local",stylers:[{saturation:-100},{lightness:40},{visibility:"on"}]},{featureType:"transit",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"administrative.province",stylers:[{visibility:"off"}]/**/},{featureType:"administrative.locality",stylers:[{visibility:"off"}]},{featureType:"administrative.neighborhood",stylers:[{visibility:"on"}]/**/},{featureType:"water",elementType:"labels",stylers:[{visibility:"on"},{lightness:-25},{saturation:-100}]},{featureType:"water",elementType:"geometry",stylers:[{hue:"#ffff00"},{lightness:-25},{saturation:-97}]}]
};
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// Create the Google Map using out element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
}
</script>
c) Save your change in the site settings, and publish. Go view your site and be happy. 
Hope that helps, cheerios and have a great day!
