Responsive Google Maps Embed Generator

Generate responsive Google Maps embed code automatically using custom HTML and CSS code, easily and instantly for free!

Generated CSS Code

How to Use

Enter the iFrame code from Google Maps into the available textarea.
Adjust the percentage of Aspect Ratio, by default, it is 75%.
Click Generate button.
Copy the Generated HTML Code and paste it into your webpage.
Then copy the Generated CSS Code and paste it into your CSS file or inside the <head> section by wrapping it up with <style></style> tag.
Finally, preview your Google Maps embed, it should be responsive on all devices.

Free Google Maps Embed Code Generator Without API Key

Embedding a map from Google Maps on your webpage is a great way to make your content more visually appealing. It also provides more details regarding a location of something you are writing about. Google Maps is a great service to provide accurate data of geolocation that turns it into a digital map on which you can interact with.

By default, Google Maps' iframe code is not responsive as it contains fixed width and height. But with simple HTML and CSS tweaks, you can embed it responsively across all devices. That's the main function of this Responsive Google Maps Embed Generator tool.

Embed Google Maps in your web sites is as simple as two steps. Search for the location or area you want to embed on Google Maps, then click the hamburger icon in the top left corner and select the Share or embed map option from the menu. Standard maps, satellite maps, and even street views can be included.

The maps will resize to fit the screen of the device and load only when the user scrolls to the map, making the website load faster.

How to Embed Google Maps Responsively using Responsive Google Maps Embed Generator

First of all, you can embed Google Maps responsively and freely without having to use API key. You only need simple HTML and CSS tweaks for this.

Just follow these simple steps:

The first step is to obtain the iFrame code. Go to Google Maps, search for the place/location whose iFrame code you want to get. Then click on Share icon, click on Embed a map tab, then copy the HTML code of the iFrame. Paste the iFrame code from Google Maps into the available textarea
Adjust the percentage of Aspect Ratio, by default, it is 75%. You can adjust it as you need.
Click Generate button. The tool will immediately generate the required codes for you and deliver to you instantly within just one second.
Copy the Generated HTML Code and paste it into your webpage.
Then copy the Generated CSS Code and paste it into your CSS file or inside the <head> section by wrapping it up with <style></style> tag.
Finally, preview your Google Maps embed, it should be responsive on all devices.
That's it!

The example of generated HTML code would be like this:

<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15776.068885428647!2d115.16540895!3d-8.689911500000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd246dfe07cc8ff%3A0x5030bfbca82fdd0!2sSeminyak%2C%20Kuta%2C%20Badung%20Regency%2C%20Bali%2C%20Indonesia!5e0!3m2!1sen!2suk!4v1661542952274!5m2!1sen!2suk" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

Now add the following CSS code to make the magic happen:

.google-maps {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}

.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

The 75% can be adjusted as you need.

Test it and see that you now have a responsive Google Maps embedded on your webpage.

Other tools you'd like to use:

Generate Responsive Google Maps Embed Code

Responsive Google Maps Embed Generator

Generated HTML Code

Generated CSS Code

How to Use

Free Google Maps Embed Code Generator Without API Key

How to Embed Google Maps Responsively using Responsive Google Maps Embed Generator

Other tools you'd like to use:

Was this tool helpful?

Related Tools