Search

Not sure why you'd want us to, but it's technically possible. If you need a refresher on how everything PPC related works, or you're looking for dedicated account management, we can help!

Posters
Social Media Posts
Brochures
Business Cards
Apparel and Merchandise
Billboards
Custom brand guidelines
Slide decks
Infographics & more

File Sharing
File Management
Quick Turnaround

This section doesn’t currently include any content. Add content to this section using the sidebar.

Image caption appears here

Add your deal, information or promotional text

How to make a responsive Google Map on your website...

 

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&#39;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&#39;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.

Hello, truth seeker!