An iframe is an HTML element that allows you to embed one HTML page into another HTML page. An iframe can be used to embed a Mapbox map into a website, insulating all the code that makes your map work from the code on your website.

While an iframe tag has a number of 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>

You can use the Mapbox Styles API to request embeddable HTML that you can use in an iframe. The HTML returned using this method only returns the map style, and does not support popups or other feature interactions:

  src='https://api.mapbox.com/styles/v1/mapbox/streets-v11.html?title=true&zoomwheel=false&access_token=YOUR_MAPBOX_ACCESS_TOKEN#15/37.771/-122.436' width='100%' height='400px' title='Mapbox Styles embed'>

The example below demonstrates using an interactive Mapbox map in an iframe, using the final product from the Create interactive hover effects tutorial. This approach requires you to host the HTML file and reference the path to that file:

Related resources: