Generate a responsive Google Maps iframe in seconds.
Simply enter an address, customize your map and copy the HTML code.
Create a responsive Google Maps embed code for your website in just a few seconds. Enter an address, business, city or landmark, customize your map, and copy the generated HTML iframe code. No registration is required. The tool is free and works with most websites, blogs and CMS (WordPress, Google Sites, HTML, Wix, Shopify, Joomla and Webflow).
A Google Map can help visitors find a business, office, shop, restaurant, hotel, event venue or tourist attraction.
With our free Google Maps Embed Generator, you can create an interactive map without manually writing HTML code. Simply enter the location you want to display, choose your preferred settings and copy the generated iframe.
You can then paste the code into your website, blog post, contact page or location page.
Creating your map takes only a few steps.
Enter the name of a business, a complete postal address, a city, a landmark or another location recognized by Google Maps.
For more accurate results, include as much information as possible, such as the street name, city, postal code and country.
Select the type of map you want to display and adjust the zoom level.
A close zoom is useful for showing a precise business address, while a wider zoom can be useful for displaying a city, region or surrounding area.
You can also select the width and height of the map. A width of 100% is recommended for responsive websites.
The preview updates automatically so you can check how your map will appear before adding it to your website.
Make sure the location, zoom level and dimensions are suitable for your page.
Click the copy button to copy the generated Google Maps iframe code.
Paste this code into an HTML block, custom code section or website editor that accepts iframe elements.
An iframe is an HTML element that displays content from another web page inside your own website.
In this case, the iframe displays an interactive Google Map. Visitors can move around the map, zoom in, zoom out and open the location in Google Maps.
A typical Google Maps iframe looks like this:
<iframe
src="https://www.google.com/maps?q=Paris&output=embed"
width="100%"
height="450"
style="border:0;"
loading="lazy"
allowfullscreen>
</iframe>
Our generator automatically creates this code based on the location and settings you select.
Embedding a map can make a website more useful and improve the visitor experience.
A map can help users:
Find your physical location
Understand the surrounding area
Plan their journey
Identify nearby roads and landmarks
Open directions in Google Maps
View your location on mobile devices
Maps are particularly useful on contact pages, store locator pages, hotel websites, restaurant websites, tourism pages and event pages.
A responsive map automatically adapts to the available width of the visitor’s screen.
For most websites, use:
Width: 100%
You can then choose a fixed height, such as:
Height: 400 or 450 pixels
This configuration allows the map to fit desktop computers, tablets and mobile phones without extending beyond the page.
There is no single perfect map size for every website.
For a standard contact page, the following configuration usually works well:
Width: 100%
Height: 450 pixels
Zoom: 14
For a smaller map in a sidebar or narrow section, you can use a height between 250 and 350 pixels.
For a large location page, a height between 450 and 600 pixels may provide a better experience.
The generated iframe can be used on many website platforms that allow custom HTML.
It may be added to:
HTML websites
WordPress
Blogger
Wix
Shopify
Joomla
Drupal
Webflow
Squarespace
Google Sites
Custom website builders
The exact procedure depends on the platform. Look for an option named “Custom HTML,” “Embed Code,” “HTML Block” or “Code Element.”
Open the HTML file or template where you want the map to appear.
Paste the generated iframe code inside the <body> section:
<section class="location-map">
<h2>Our Location</h2>
<iframe
src="YOUR-GENERATED-MAP-URL"
width="100%"
height="450"
style="border:0;"
loading="lazy"
allowfullscreen>
</iframe>
</section>
Save the file and reload your website to verify that the map displays correctly.
In the WordPress editor:
Open the page or post you want to edit.
Add a Custom HTML block.
Paste the generated iframe code.
Preview the page.
Publish or update the page.
Do not paste the iframe into a normal paragraph block, because WordPress may display it as plain text instead of rendering the map.
Open your Google Sites page and select:
Insert → Embed → Embed Code
Paste the generated iframe code and select “Next.”
Check the preview, select “Insert,” and resize the map block if necessary.
The map will be displayed inside an embedded section on your Google Sites page.
This free generator allows you to:
Search for an address or place
Generate a Google Maps iframe
Adjust the map zoom
Select a map style
Choose the iframe width
Choose the iframe height
Create a responsive map
Preview the result
Copy the HTML code
Generate a map without registration
Yes. You can use the generator and copy the resulting iframe code for free. No account or registration is required.
The basic iframe created by this generator does not require you to enter a Google Maps API key.
More advanced Google Maps integrations, including applications built with certain Google Maps Platform APIs, may require a Google Cloud project, an API key and billing configuration.
Yes. A standard Google Maps iframe can generally be embedded without manually providing an API key.
Our generator creates a simple iframe intended for standard location displays.
Yes. Set the width to 100% to make the map adapt to the available space on desktop, tablet and mobile screens.
Yes. Enter the business name or full postal address in the location field.
For better accuracy, include the city, postal code and country.
Yes. The generator can display businesses, addresses, cities, regions, landmarks and countries recognized by Google Maps.
Yes. Use the zoom setting to control how much of the surrounding area is visible.
A higher zoom value displays a more precise area. A lower zoom value displays a larger geographical area.
Yes. You can select the width and height of the generated map.
For responsive pages, a width of 100% is recommended.
Yes. Google Maps embeds work on modern mobile browsers. A responsive width helps the map fit properly on smaller screens.
Visitors can interact with the map and may open the location directly in Google Maps to access directions and other location information.
Yes, but displaying many maps on the same page may increase loading time. Use lazy loading and only include maps that are genuinely useful to visitors.
Lazy loading asks the browser to delay loading the map until it is close to the visible part of the page.
This can improve initial page loading performance, especially when the map appears near the bottom of a long page.
Yes. The same map or different maps can be embedded on as many pages as needed.
Yes. Select the appropriate map type before generating the iframe.
Yes. The generator supports different interface languages when available.
Yes. Simply generate a new iframe and replace the old code.
An embedded map loads external content, so using loading="lazy" is recommended for optimal performance.
For most contact pages:
Width: 100%
Height: 450px
Zoom: 14
Yes. Many online stores use Google Maps to display physical store locations.
Yes. Business websites commonly embed Google Maps on their contact page.
Yes. Responsive iframes automatically adapt to smartphones and tablets.
Yes. The generated iframe uses secure HTTPS URLs.
Use a complete and accurate address to avoid displaying the wrong location.
Set the width to 100% for responsive layouts.
Choose a height that is large enough to make the map easy to use.
Add a visible heading above the map, such as “Our Location” or “Find Us.”
Include the address as normal text near the map so visitors can copy it easily.
Avoid placing too many map embeds on the same page.
Test the map on both desktop and mobile devices before publishing your page.
Google Maps Embed Best Practices
When embedding a Google Map on your website, following a few simple best practices can improve both usability and performance.
Always use a complete address whenever possible. A precise address usually provides more accurate results than a business name alone, especially when several businesses have similar names.
For responsive websites, use a width of 100% so the map automatically adapts to desktop computers, tablets and mobile devices.
Choose a zoom level that matches the purpose of the page. A close zoom is ideal for showing a business entrance, while a wider zoom works better for cities, tourist destinations or regions.
If your page already contains many images or videos, enabling loading="lazy" helps reduce the initial loading time by delaying the map until it becomes visible.
Finally, always preview the generated map before publishing to verify that the correct location is displayed.
Google Maps can be embedded on almost any type of website.
Common examples include:
Business contact pages
Restaurants
Hotels
Tourist attractions
Museums
Shops
Medical clinics
Schools and universities
Office buildings
Real estate agencies
Event venues
Warehouses
Airports
Parks
Government buildings
Interactive maps make it easier for visitors to locate a place and quickly open directions in Google Maps.
The generated iframe contains several parameters that control how the map is displayed.
q
Specifies the location displayed inside the map.
Example:
q=New+York
z
Defines the zoom level.
Typical values range from 1 (world view) to 20 (street level).
t
Specifies the map type.
Examples:
m = Road Map
k = Satellite
h = Hybrid
p = Terrain
hl
Defines the interface language.
Example:
hl=en
output=embed
Displays the map in embeddable mode.
Sometimes an embedded Google Map may not display as expected.
The most common causes include:
Incorrect address
Wrong zoom level
Invalid iframe code
Unsupported HTML editor
Mixed HTTP and HTTPS content
Very small iframe dimensions
In most cases, regenerating the iframe with the correct address solves the problem.
Our generator creates code compatible with virtually every website platform.
It works with:
HTML websites
WordPress
Google Sites
Wix
Shopify
Joomla
Drupal
Squarespace
Webflow
Blogger
The generated code can usually be pasted into a Custom HTML, Embed, or Code Block section.