Aspect Ratio

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:

  1. 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
  2. Adjust the percentage of Aspect Ratio, by default, it is 75%. You can adjust it as you need.
  3. Click Generate button. The tool will immediately generate the required codes for you and deliver to you instantly within just one second.
  4. Copy the Generated HTML Code and paste it into your webpage.
  5. 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.
  6. Finally, preview your Google Maps embed, it should be responsive on all devices.
  7. That's it!

The example of generated HTML code would be like this:

<div class="google-maps">
<iframe src="!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>

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:

  1. Youtube Thumbnail Downloader
  2. Youtube Subscribe Link Generator
  3. Online Drawing Tool
  4. Online Avatar Maker
  5. PNG Gradient Background Generator
  6. Bulk Hyperlinks Generator
  7. Fancy Text Generator
  8. WhatsApp Chat Link Generator
  9. Social Media Share Link Generator
  10. Strong Password Generator

Was this tool helpful?

Consider spreading it out loud to all people out there.

...or you can also

  Buy Me a Coffee

a small sip will do.

Age Calculator

Age Calculator can accurately calculate your exact age based on your birthday. Years, months, and days will be presented as the determined age.

Google Fonts Preview Tool

Write perfect content for both humans and search engines. Easily preview Google Fonts and find the best combination of Google Fonts pairing from 650+ best fonts with the Google Fonts Preview tool.

HTML Button Generator

HTML Button Generator creates HTML code to make a button that can be put into HTML. Customize your button style in real-time and grab the HTML code.

HTML to PDF Converter

Instantly convert HTML to PDF document with a single click, either by fetching directly from a webpage/URL or manually.

Live Content Previewer Tool

Instantly retrieve a content from remote URL and show it nicely in a Facebook-like layout using the Live Content Previewer tool.

Online Avatar Maker

Create a simple avatar to use on social media profiles, online forum, site avatar etc with the free Online Avatar Maker tool.

Online Drawing Tool

Online Drawing Tool provides fast drawing experience for everyone to create digital artwork and download it as a JPG image.

PDF to Text Extractor

PDF to Text Extractor tool will convert PDF to text on the fly. The true online PDF to text extractor which is fast, safe, and free.

PNG Gradient Background Generator

Generate a gradient background image and download it as a PNG image file for free using PNG Gradient Background Generator.

Responsive Google Maps Embed Generator

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

Responsive Youtube Embed Generator

Instantly generate responsive Youtube video embed codes for you to use without writing a single line of code, for free!

Social Share Link Generator

Automatically generate top 10+ social media share links with a click including Facebook, Twitter, Linkedin, WhatsApp, and more for 100% free!

Top Notification Bar Generator

Easily and instantly create a highly customizable top fixed bar with the free Top Notification Bar Generator tool.

URL Encoder and Decoder

URL Encoder and Decoder is a very simple tool to help you convert any URL into a percent encoded string.

URLs Extractor Tool

Get all URLs from a website online using URLs Extractor Tool. Extract URLs from any website instantly for free.

WhatsApp Chat Link Generator

Generate a WhatsApp chat link to send to a specific number with a personalized message and share it with your audience, customers, or online networks, instantly and for free!

WordPress Child Theme Generator

WordPress Child Theme Generator is a free tool to create a custom child theme for your currently active theme without having to write a single code.

Youtube Subscribe Link Generator

Generate a Youtube channel subscribe link that shows popups if people click it for free with the Youtube Subscribe Link Generator.

Youtube Thumbnail Downloader

Free YouTube Thumbnail Downloader tool allows you to instantly download any YouTube thumbnail with just a few clicks.