Generate a responsive Street map iframe in seconds.
Simply enter an address, customize your map and copy the HTML code.
Create a responsive embed map 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).
An interactive map can help visitors find a business, office, shop, restaurant, hotel, event venue or tourist attraction.
With our free Embed Maps Generator, you can create an interactive map without manually writing HTML code. Simply enter an address or location, customize your map and copy the generated HTML iframe code.
You can then paste the map embed code into your website, contact page, blog or location page.
Creating a map embed takes only a few steps.
Enter a business name, complete postal address, city, landmark or another location recognized by the mapping service.
For more accurate results, include the street name, city, postal code and country whenever possible.
Choose the map type and adjust the zoom level.
A closer zoom is useful for displaying a precise business location, while a wider zoom can show a city, region or surrounding area.
You can also customize the width and height of your map iframe. For responsive websites, a width of 100% is recommended.
Check the live preview to make sure the location, zoom level and dimensions are correct.
Copy the generated map iframe and paste it into an HTML block, embed section or website editor that accepts iframe code.
An iframe is an HTML element used to display content from another page inside your website.
A map iframe displays an interactive map that visitors can explore without leaving your page. They can move around the map, zoom in or out and open the location in the map.
A typical map embed code looks like this:
<iframe
src="YOUR-GENERATED-MAP-URL"
width="100%"
height="450"
style="border:0;"
loading="lazy"
allowfullscreen>
</iframe>
Our generator automatically creates the iframe code based on the location and settings you select.
Embedding Interactive maps can make it easier for visitors to find and understand a physical location.
An interactive map can help visitors:
· Find your business or physical location
· Understand the surrounding area
· Plan their journey
· Identify nearby roads and landmarks
· Open directions from the map
· View the location on desktop or mobile
Map embeds are particularly useful for contact pages, store locators, restaurants, hotels, tourist attractions, offices and event venues.
A map provides geographic context for a place, but location can also influence the conditions visitors may experience there. Weather, temperature, wind and precipitation can vary significantly between cities, regions and even nearby locations.
For destinations, outdoor venues, hotels, events and travel-related websites, geographic information can therefore be complemented with local weather data. Visitors planning a journey or visit can check worldwide weather information, consult local weather forecasts for France and Italy, use TiempoDeHoy for Spain and Latin America, find weather forecasts for Brazil or check weather in Germany with detailed local forecasts.
A responsive map automatically adapts to the available width of the visitor's screen.
For most websites, use:
Width: 100%
Height: 400–450px
Using a width of 100% allows the iframe to adapt to desktop computers, tablets and smartphones.
There is no single ideal map size for every website.
For a standard contact or location page, a good starting point is:
· Width: 100%
· Height: 450px
· Zoom: 14
For a smaller sidebar map, a height of 250–350px may be sufficient.
For a large location or destination page, 450–600px can provide a better viewing experience.
Paste the generated iframe inside the <body> section of your HTML page:
<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 page and reload your website to verify that the map displays correctly.
In the WordPress editor:
1. Open the page or post you want to edit.
2. Add a Custom HTML block.
3. Paste the generated map iframe code.
4. Preview the page.
5. Publish or update the page.
Do not paste the iframe into a normal paragraph block, because WordPress may display the code as text instead of rendering the map.
Open the page in your website builder 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 generated map iframe can be used on most platforms that accept custom HTML or embed code, including:
· HTML websites
· WordPress
· website builders
· Wix
· Shopify
· Joomla
· Drupal
· Squarespace
· Webflow
· Blogger
Look for an option such as Custom HTML, Embed Code, HTML Block or Code Element.
Our free Embed Maps Generator allows you to:
· Search for an address, business or place
· Generate a map iframe
· Adjust the map zoom
· Select a map type
· Customize iframe width and height
· Create a responsive map
· Preview the map
· Copy the HTML embed code
· Generate maps without registration
The generated map iframe contains parameters that control how the map is displayed.
The q parameter specifies the location displayed on the map.
Example: q=New+York
The z parameter controls the zoom level.
Typical values range from 1 for a very wide geographical view to around 20 for a close street-level view.
The t parameter controls the map type.
Common values include:
· m — Road Map
· k — Satellite
· h — Hybrid
· p — Terrain
The hl parameter specifies the interface language.
Example: hl=en
The output=embed parameter tells interactive maps to display the map in an embeddable format.
If an embedded map does not display correctly, check for:
· An incorrect or incomplete address
· An unsuitable zoom level
· Invalid or incomplete iframe code
· An HTML editor that does not support iframes
· HTTP/HTTPS mixed-content problems
· Iframe dimensions that are too small
In many cases, generating a new iframe with a complete address resolves the problem.
Yes. You can generate and copy the map iframe code for free. No account or registration is required.
The standard iframe generated by this tool does not require you to manually enter an interactive maps API key.
More advanced integrations using interactive maps Platform APIs may require a cloud project, API key and billing configuration.
Yes. A standard map iframe can generally be embedded without providing an API key manually.
Yes. Set the width to 100% to allow the map to adapt to desktop, tablet and mobile screens.
Yes. Enter the business name or full postal address. Including the city, postal code and country can improve accuracy.
Yes. The generator can display addresses, businesses, cities, regions, landmarks and countries recognized by the mapping service.
Yes. A higher zoom value shows a smaller, more precise area. A lower value shows a larger geographical area.
Yes. Both dimensions can be customized. For responsive websites, a width of 100% is recommended.
Yes. Responsive map iframes work on modern smartphones and tablets.
Visitors can interact with the embedded map and open the location in the map to access directions.
Lazy loading delays loading the map until it approaches the visible part of the page. This can improve initial page-loading performance.
Yes, although embedding many maps can increase page loading time. Use only the maps that are useful to visitors and enable lazy loading.
Yes. Select the appropriate map type before generating your iframe.
Yes. Different interface languages can be selected when supported.
Yes. The generated iframe uses secure HTTPS URLs.
For most contact pages, a good starting point is:
• Width: 100%
• Height: 450px
• Zoom: 14
For the best results, use a complete and accurate address and preview the map before publishing it.
Use a width of 100% for responsive layouts and choose a height large enough to make the map easy to use.
Select a zoom level appropriate for the location. A closer zoom works well for individual businesses, while a wider zoom is better for cities, tourist destinations and regions.
If the map appears below other page content, use loading="lazy" to reduce its impact on initial page loading.
It is also useful to display the address as normal text near the map so visitors can easily read or copy it.
Interactive maps can be embedded on many types of websites, including:
· Business contact pages
· Restaurants and hotels
· Tourist attractions and museums
· Shops and shopping centers
· Medical clinics
· Schools and universities
· Offices
· Real estate websites
· Event venues
· Airports
· Parks
· Government websites
An interactive map helps visitors locate a place and quickly access directions from the map.