iframe doc

Embedding your map into your website is a great way to extend your map's reach and further engage your audience. Once embedded, your map can be used on your website via desktop or mobile.

Follow the steps below to embed your map into your website.

Step 1: Obtain your map's embed code

In the Map Manager, click Share map featured at the top of the left-side toolbar.

Click Embed in the pop-up that appears.

Copy the unique embed code that's provided.

Paste the code into your website's HTML code in the location where you'd like your map to appear.

Step 2: Adjust the size of your embedded map

Your map's embed code includes a default display size. However, you can change your map's display size using the steps below.

Example code
<iframe src="https://web.steps.me/i/-fuyCn_HGdL?zoom=11&lat=27.7484&lon=-80.4"
width="50%" height="50%" style="border: 1px solid #ddd;"></iframe>

width/height

border width

border color

How to Embed the live map on your website:

Locate the width and height details in your map's embed code (see highlight in the example above).

The default value for width and height is 50%. Using percentages or pixels, adjust these values as desired to update your embedded map's size. Below are recommended map sizes (in pixels):

Desktop:
- Small maps: Width: 730-890; Height: 560-700
- Large maps: Width: >1050; Height: >620

Mobile:
- Width: >300 ; Height: >540

Note the border width and border color highlighted in the example code above. By default, the map border is 1 pixel, and the default border color is light grey. Update these values as desired by changing the number of pixels and the color value.

Step 3: Define what your map displays first

By default, your embedded map displays the step that is closest to the viewer's location. To define a specific area that your map will always display first, follow the steps below.

In Google Maps, view the desired area you'd like your map to display. Be sure to zoom in to the desired level.

Copy the latitude, longitude and zoom values from the URL. See the example below for help identifying these values.

Google maps URL example
https://www.google.com/maps/@42.336545,-71.1329683,15z

latitude

longitude

zoom

Enter these values into your map's embed code. Use the example below to identify the location of the latitude, longitude and zoom values within the embed code. Note: The zoom level can be set to any value between 1 and 21.

Example embed code
<iframe
src="https://web.steps.me/i/-fuyCn_HGdL?zoom=11&lat=27.7484&lon=-80.4" width="50%" height="50%" style="border: 1px solid #ddd;"> </iframe>