Embed a Map | Wolf Maps

Your map is always available through its own URL, which is useful on its own. But sometimes you want to show the map interactively on your own website. This guide explains how.

Standard embed

The easiest way to embed your map is already prepared for you, both for the full map and for a specific location. You can find the embed code under Share map.

Below is the default embed code from the share panel. You can place it in your website code to show the full map on your website. Tip: adjust width and height so it fits your layout.

<iframe width="560" height="315" src="https://wolfmaps.com/embed/a7b997b?zoom=1" title="Sustainable City Guide - Groener Groningen" allow="geolocation *" frameBorder="0"></iframe>

Specific embed

Sometimes you do not want to show the full map, but a specific selection. For example in a blog article where you highlight a specific category. Here is how to do it.

1. Basic embed code

Start with the default embed code from Share map.

<iframe width="560" height="315" src="https://wolfmaps.com/embed/a7b997b?zoom=1" title="Sustainable City Guide - Groener Groningen" allow="geolocation *" frameBorder="0"></iframe>

2. Filter your map

On the map, select the category or tag you want to show in your embed.

3. URL in the address bar

If two categories are selected, like in the example above, the URL in your address bar can look like this:

https://wolfmaps.com/kaart/duurzame-stadsgids-groener-groningen-a7b997b?preview=true**&c=37bda7b&c=e7b2e9b**#14.95/53.21785/6.56805

4. Copy only the filter part

From that URL, copy only this part: &c=37bda7b&c=e7b2e9b. Then add it behind your default embed code, as shown below.

<iframe width="560" height="315" src="https://wolfmaps.com/embed/a7b997b**&c=37bda7b&c=e7b2e9b**" title="Sustainable City Guide - Groener Groningen" allow="geolocation *" frameBorder="0"></iframe>

5. Extra: coordinates and zoom level

In step 3 you can also see extra URL data. Before the first slash is the zoom level, followed by coordinates. If you include this too, visitors see exactly the same viewport you had.

#14.95/53.21828/6.56791

Then your embed looks like this:

<iframe width="560" height="315" src="https://wolfmaps.com/embed/a7b997b#14.95/53.21828/6.56791" title="Sustainable City Guide - Groener Groningen" allow="geolocation *" frameBorder="0"></iframe>