Shift CMS: Embedding a Google Map

In this video James explains how to update or replace your Google Map with a map embedded directly from Google. Google’s Map API system now requires a subscription if you want an application to talk to Google maps, so we can get around this by embedding a map directly from Google instead, which won’t be affected by their API changes.

Here’s the code that you can use to make your Google Map responsive (i.e. mobile-friendly):

<h3> Our Location</h3>

<style>
.map-responsive{
    overflow:hidden;
    padding-bottom:100%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
</style>

<div class="map-responsive">
PASTE MAP IFRAME CODE HERE
</div>