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.
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.
Your map's embed code includes a default display size. However, you can change your map's display size using the steps below.
width="50%" height="50%" style="border: 1px solid #ddd;"></iframe>
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):
- Small maps: Width: 730-890; Height: 560-700
- Large maps: Width: >1050; Height: >620
- 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.
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
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
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>
Need more help?
A member of our team would be happy to assist you! Email us at email@example.com.