Insert maps in websites with a simple 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://maps.tilehosting.com/styles/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 administration

Generated code in the MapTiler Cloud administration (map acces key blurred).

Modify 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 or pan the map. 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://maps.tilehosting.com/styles/streets/?key=XXX#14.17/40.71655/-73.99943/-20/60"></iframe>

(where XXX is your map access key). The zoom level, latitude, longitude, rotation and panning 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).

New York od the Street map, zoomed in to Manhattan, rotated by 340° and panned by 60°New York od the Street map, zoomed in to Manhattan, rotated by 340° and panned by 60°, with 3D buildings enabled.

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

Was this article helpful?
0 out of 0 found this helpful