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.
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
height for the element.
<iframe src="/path/to/your/file.html" width="100%" height="400px" title="My file" ></iframe>
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
iframe does not currently 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>
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.
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.