Map Not Loading In Google Maps JavaScript API page

Hello,

I have a properly functioning map example here:

http://roadtripsharing.com/plan-a-road-trip-js

(not WordPress)

but when I paste the code into a blank WordPress page the map doesn’t appear:

http://roadtripsharing.com/plan-a-road-trip

I tried it with different themes and domains and removing the head/body/doctype tags. I made a header.php file for my child theme just not sure which code to put where. (Source can be viewed in the first link.)

I tried pasting all script EXCEPT

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

into customizer custom js and that did not make the map show.

I noticed the page also did not work when I pasted it all into js fiddle but I did not separate the html, css, and js from each other, only pasted them into the html field. The error message that comes up is that “The page was unable to display a Google Maps element.”

I’ve read docs and forum threads about enqueue just not sure how to use it or something else to make the js work. Should I make a folder roadtripsharing.com/script and then put a js file in there, then use enqueue to link to it? If so what would the syntax be, to add to header.php or functions.php and/or elsewhere?

Thanks!