Where am I going wrong with the Google Maps API?

One more thing to add is that I copy/paste the code from the Google tutorial, and it works. However, if I remove the optional HTML from the style tag (I'm just tinkering at this point to figure out what's the minimum I need in my HTML), it doesn't work. And I don't get any errors. So I'm not sure how to diagnose that. This is the section I removed.

      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

HTML elements normally get their height from their content, we don't normally have to give them a height in CSS. But for a google map, we do. I'm not sure why, maybe something to do with the way it puts the map in an iframe inside the element. At any rate, you need to give your map an explicit height in CSS or it won't be visible. In the tutorial code, they gave the map height: 100%;, which means taking up 100% of it's parent. But if the parent's height was 0, that's 100% of nothing, so they had to put 100% on the body and html elements as well.

You could also just give your map a pixel value for height. You could have kind of a card-sized map:

#map {
    height: 300px;
    width: 300px;
    border-radius: 10px;
}

It seems like you can also do this:

$.getScript("https://maps.googleapis.com/maps/api/js?key=OMMITTED_FOR_PRIVACY&callback=initMap");

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
    });
}

But why? In this version, a script loads another script. Your user will have to wait longer to see everything rendered. First, your page will parse the HTML, where it says to download and parse app.js, and then app.js will tell it that it needs to fetch the google maps code. But you could have told the browser sooner when it was parsing the HTML that it needs the google maps script as well, and the browser would fire off requests concurrently for all the scripts.

If you want to only display the map to the user when they click the button, that's fine. Or change the location on the map when they click the button. But you don't need to wait to download the script.

Normally with APIs we fetch some JSON from some url. But in this case, what we’re fetching from that URL is JavaScript code. It’s like jQuery, a library of someone else’s code to use and run in your app.