Insert maps in websites with a simple iframe

This article demonstrates how to insert maps into websites with an iframe. To display a map on your website or in your blog, just copy and paste pre-generated code, which you can find if you sign in into MapTiler Cloud administration and click on one of the standard maps.

Copy & paste the pre-generated code to insert a map

The code should be inserted somewhere between <body> and </body> HTML tags where you want to have the map on your page. If you are using a blogging platform, search for a button switching to HTML code and insert the code where you want to display your map in the text.

After that, there should be a simple map viewer with zoom in and zoom out buttons altogether with a button for rotation.

The code looks like this

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

Replace the text YOUR_MAPTILER_API_KEY_HERE with your map access key, which you will get after FREE registration. If you already registered, the key can be found in the administrations in Account > API keys. It is a mixture of 20 numbers and digits.

Get your API key

Modify and move the map

You can also change the size of your viewer by modifying the source code, namely by changing the width and height value or using CSS styling for the element.

You can switch the map style either by generating the code by clicking on a selected map style or by changing the “basic” in the example above.

The default location of the map is set to Zurich. However, this can be easily changed if you move to a different location, zoom in or out. The pre-generated source code is changing automatically, so you just select the place you want to show on the map and the code will give you exactly the same spot.

The values mentioned above can also be changed in the source code. All you have to do is to add hash character, zoom level slash latitude slash longitude (optionally also slash rotation angle slash panning angle), so the final code looks like this (for Manhattan):

<iframe width="500" height="300" src="https://api.maptiler.com/maps/streets/?key=YOUR_MAPTILER_API_KEY_HERE#14.0/40.70850/-74.00603"></iframe>

(where YOUR_MAPTILER_API_KEY_HERE is your map access key). The zoom level, latitude and longitude can be found for example if you browse unsigned on the MapTiler Cloud main page and browse one of the maps in Map Styles section in Fullscreen (button in the top right corner of the map).

If you want to create more complex web applications, read How-to: Use maps interactively with JavaScript.