iframe
An iframe is an HTML element that allows you to embed one HTML page into another HTML page. They are commonly used for embedding maps, videos, social media, and other elements in websites.
While an iframe tag has many attributes for formatting the element, it must contain a src with a path to the embedded HTML file. This example also specifies a width and height for the element.
<iframe
src="/path/to/your/file.html"
width="100%"
height="400px"
title="My file"
></iframe>
Request an iframe in Mapbox Studio
You can use Mapbox Studio to request an iframe to embed in a webpage that contains a map that uses your Mapbox-hosted style.
Before embedding an iframe into your HTML page, it is important to understand the limitations of an iframe and when to instead use Mapbox GL JS or another Mapbox product:
iframe does support:
- Displaying a Mapbox-hosted style on an HTML page
- Pan, zoom, and tilt
- Showing users a default map location
- Search
iframe does not support:
- Feature interactions such as popups and click events
- Access to additional Mapbox products
- Programmatic access to Mapbox GL JS APIs
- The oEmbed standard, required for embedding on certain blogs
If you are using WordPress, the WordPress map block may be better suited for your needs. The WordPress map block is not maintained by Mapbox.
The example below demonstrates iframe HTML from Mapbox Studio:
<iframe
width="100%"
height="400px"
src="https://api.mapbox.com/styles/v1/mapbox/streets-v12.html?title=false&zoomwheel=false&access_token=YOUR_MAPBOX_ACCESS_TOKEN"
title="Streets"
style="border:none;"
></iframe>
Accessibility
Users with limited connectivity, screen readers, or other assistive devices use the title field of an iframe to add context to your map.
By default in Mapbox Studio, this value is the name of your style. Make sure the title is informative to users before embedding.
Add an iframe to a website builder
If you do not have direct access to your website's HTML page, you may be using a website builder such as Squarespace or Shopify.
Mapbox does not officially support integration with these platforms, but iframe functionality is a web standard and most website builders offer support through a Code Block, HTML Block, HTML Editor, or similar interfaces.
Linked below are external resources to provide iframe integration for Squarespace and Shopify. If you have any questions about these resources, contact either Squarespace or Shopify support.
Related resources: