If you're embedding a Google Map on your website, chances are you've come up against this problem. Once you install an iframe of any kind, making it responsive often requires additional CSS code in the form of an all encompassing div.
Making any <iframe> responsive, including an embedded Google Map, is easier than you may think. All it requires is the assignment of a CSS class and the correct outside definition of that CSS class to include responsivity.
If you're unfamiliar with the process of getting Google Map embed code, follow the simple steps in Part #1 below. If you're a Google Maps OG, feel free to move on to Part #2.
PART #1: Get The Code
a) Visit https://www.google.com/maps
b) Search for whatever location you want to embed on your website.
c) Click the "Share" link to get the embed code (see attached image)
d) Click the "Embed a map" toggle, copy the iframe html, and voila! You have your embed code!
PART #2: Embed The Code
a) In this case, we want to embed the location of the world's Largest Ball of Twine (a mecca among pilgrims with little regard for their personal time).
The code itself is an iframe and looks like this:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2816.459723485504!2d-94.41237658437264!3d45.096748065907256!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x52b4d86419699c6b%3A0x9c806b82cb845b59!2sWorld's%20Largest%20Ball%20Of%20Twine!5e0!3m2!1sen!2sus!4v1616948919869!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
You'll want to enter it into the "html" side of any text editor, otherwise it will display as the code itself, such as it does above.
b) Now you'll want to add a div around the iframe, so you can add a definable class to it. Here we're calling the div class twine-ball:
<div class="twine-ball"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2816.459723485504!2d-94.41237658437264!3d45.096748065907256!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x52b4d86419699c6b%3A0x9c806b82cb845b59!2sWorld's%20Largest%20Ball%20Of%20Twine!5e0!3m2!1sen!2sus!4v1616948919869!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe></div>
PART #3: Define Your CSS
Lastly, define the CSS class within your CMS (wherever appropriate).
.twine-ball{ overflow:hidden; padding-bottom:56.25%; position:relative; height:0;
}
.twine-ball iframe{ left:0;
top:0; height:100%; width:100%; position:absolute;
}
You're done! Now check your embedded map on multiple devices, or by collapsing and expanding your browser to see if the map responds to the pixels on your screen.