Steps

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:

1.

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.

2.

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

3.

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
<iframe
src="https://embed.steps.me/?map_id=GoY-hVRUOus&zoom=11&lat=27.7484&lon=-80.4" width="100%" height="600">
</iframe>

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.

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

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

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

1.

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.

2.

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
https://www.google.com/maps/@32.0798667,34.7763609,15z

lat
lon
zoom