Embed map with iFrame

An iFrame is the simplest way to show an interactive map on your website or blog, like this:

The map comes with basic controls to zoom and move around. You don’t need any coding skills, just a few lines of HTML that you put together from your map’s style ID and your API key. Prefer to have an AI assistant write the code for you? See how to use MapTiler with AI.

Create the iFrame code

1. Open the map you want to use in your MapTiler account. It can be a ready-made map or your custom map.

2. Click Share. Under Build an application, copy the style ID and pick the API key you want to use for this map.

   

3. Copy this code and replace YOUR_STYLE_ID_HERE and YOUR_MAPTILER_API_KEY_HERE with your values:

   
   <iframe
     width="500"
     height="300"
     allow="geolocation"
     src="https://api.maptiler.com/maps/YOUR_STYLE_ID_HERE/?key=YOUR_MAPTILER_API_KEY_HERE">
   </iframe>
   

   Keep the allow="geolocation" attribute. It lets your visitors use the map’s button that shows their location. Without it, the button is still present but disabled.

The map now opens with its default view and basic controls. To show a specific place, see Customize the iFrame.

Protect the API key

Before you publish the code, protect your API key so that it only works on your website. The key is visible in the page source, so anyone could copy it and use it on their own site otherwise.

Add the code to your website

Paste the code into your page’s HTML between the <body> and </body> tags, where you want the map to appear.

On a blogging platform or website builder, look for an option to edit HTML or add an HTML block, and paste the code there.

Customize the iFrame

Map size

Change the size of the map with the width and height attributes, or style the <iframe> element with CSS.

Location, zoom, bearing, and pitch

To open the map at a specific place, add a position hash to the end of the URL in src. It works exactly like in a link to map: #zoom/latitude/longitude, optionally followed by /bearing/pitch.

For example, this code shows Manhattan at zoom 13, rotated by -25 degrees and tilted by 60 degrees:

<iframe
  width="500"
  height="300"
  src="https://api.maptiler.com/maps/streets-v4/?key=YOUR_MAPTILER_API_KEY_HERE#13/40.71/-74.01/-25/60"
></iframe>

Example of a tilted map view of Manhattan

To find the values for your view, open your link to map in a browser and move the map to the place you want. The address bar then shows the current position hash, so you can copy it to your iFrame code.

Map style

To show a different map, replace the style ID in the src URL with another map’s style ID.

If you want to configure the map controls, add markers or your own data, or build a full map application, see Build a map application.