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.
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
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:
<iframe 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'> </iframe>
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: