Do you blog about your rides? Do you have a website that you share rides and routes with your club or team? Our embed feature is a great way to share this information on your site with an interactive map and elevation profile.

For those times when you want to embed many routes into a single page, use the Multi-route Embed feature.

Here’s how to embed the map into your blog or website by using our EMBED MAP feature:

  1. Select the ride or route you want to share on your website.
  2. Go to SHARE
  3. Click the GET CUSTOM EMBED button
  4. You’ll get a preview of your embed, the option to change the title of the embedded map, select Metric as the distance, and option for elevation profile.
  5. Select the HTML code that is in Embed Code field. Right-click COPY this code to use on your blog or website.
  6. Paste the HTML code into your site or blog.
    • Depending on your blogging platform, you may have to paste this code in a TEXT or CODE editor. Use TEXT when using WordPress and CODE when using Blogger.

    Do not paste the code into the VISUAL editor for any blogging platform as this will end up displayed as a bit of code rather than an embedded map. Make sure to paste it into the Text, Code, or HTML view for the post or page.

    embed-pasted-wordpress

Tips on using the Embed

  • WordPress.com users may not be able to use the embed as IFRAMES are not allowed. However, using WordPress.org installed on your own hosting server the embed will work fine.
  • Adjust the height to suit the needs of your site. We recommend a minimum of 300px otherwise the route will show extremely small.
  • You can embed rides, routes, and event pages.
  • Event pages can take advantage of the Multi-route Embed.
  • POIs on routes will show up in the embed and can be clicked to show more information and photos.

In the sample embedded map below, you can:

  • Click “View Full Version” to go to the ride page for more metrics, links to export, and other sharing options.
  • Pan and zoom.
  • Click & drag the elevation graph to select parts of the route.
  • Change map view.
Facebooktwitterredditpinterestby feather