Improving embedded Google Maps in the Landing Page tutorial

I just went through the Landing Page tutorial and cleaned up the Google Maps embed section. Since the new Google Maps API requires a billing account to set up access via jquery, I looked into how to modify the lesson to still embed a map and keep it responsive. Insert the .map-container like normal:

<!--Google map-->
<div id="map-container" class="z-depth-1-half map-container mb-5" style="height: 400px"></div>

Skip the rest of the instructions. You won't need to use jquery for this at all. Go to Google Maps and look up a location. Once you have found your location, click on the Share button. Click on Embed Map. Select a size (Medium should work just fine) and click the Copy HTML button. Paste the <iframe> inside the .map-container div.

<div id="map-container" class="z-depth-1-half map-container mb-5" style="height: 400px">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d206091.37549016328!2d-86.92532566114805!3d36.186558900655065!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8864ec3213eb903d%3A0x7d3fb9d0a1e9daa0!2sNashville%2C+TN!5e0!3m2!1sen!2sus!4v1541568455626" width="650" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>

You will then need to add some CSS magic to make the .map-container responsive. Save everything and you should be good to go.

.map-container{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-container iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}

---