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/basic/?key=XXX"></iframe>
where instead of XXX there is your map access key, which you will get after free registration. If you want to somehow manipulate with it, the key can be found in the administrations in Settings under Maps API key. It is a mixture of 20 numbers and digits.
Generated code in the MapTiler Cloud administration (map access key blurred).
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=ptRri5SRXyugsx5Bdomf#14.0/40.70850/-74.00603"></iframe>
(where XXX 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).