Embedding Map Into Your Website

Your Steps map can be embedded and displayed on any website. The live and interactive map supports multiple resolutions and is compatible on mobile screens. Embedding your map is easy - follow the instructions below to embed the map code into your existing html website code. 

How to Embed the live map on your website:


Go to the Map Manager web-tool and click on “Share Your Map”. Then, click on the Embed tab to view, and then copy your map’s individual embed code.


Paste the code into your original website’s html code in the location you would like the map to be displayed.


Edit the map’s parameters to your desired specifications: the size of your displayed map, and the default zoom view.

Setting your embedded map Parameters

Example code
src="" width="100%" height="600" style="border: 1px solid #ddd;">

How to Embed the live map on your website:

Source and map_id = your unique source and individual map ID is generated automatically for each map
Map location = Parameters that will determine how the map will be shown when the page is viewed. 
By default, the map view centers itself around a step that's closest to the viewer's location.

zoom = level between (1-21)

lat = Decimal latitude.

 lon = Decimal longitude.

see more info below on how to set the lat, lon, and zoom.

Height = the height of the map on the web page.

Width = the width of the map on the web page.

see more info below on recomended sizes

Border = The frame around the embedded map on the website, at default is set to be 1px and grey in color.

Setting Your Map’s Focus using Latitude, Longitude, and Zoom level


Go to Google Maps and locate the section of map that you would like to display on your live map. 
Be sure to zoom in or out to your desired specifications.


From the URL, copy the latitude, longitude and zoom. Paste those coordinates in the live map code. See the image below for more on how to determine latitude, longitude, and zoom.

Google maps URL example,34.7763609,15z


Recommended map sizes (Pixels):


For desktop view:
Small map - Width: 730 - 890 ; height: 560-700
Large map - Width: over 1050 ; height: over than 620


For mobile view:
Width: over 300 ; Height: over 540

Questions? Email us at and we'll help you out.