1. Ride with GPS Help Center
  2. Organize and Share
  3. Publish to your Website or Blog

Ride and Route Embeds

  • Updated

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, with an interactive map and elevation profile, is a great way to share this information on your site. Check out the example below. 

_____________________________________________________________________

Download the Ride with GPS mobile app

appstore.png   googleplay.png

_____________________________________________________________________

Access your routes through the Ride with GPS mobile app, and get turn-by-turn voice navigation as you ride. Advanced Route Planning tools and voice navigation are both unlocked with a Premium membership. 
 

Embed a map into your blog or website:

When viewing the ride or route you want to embed on the website:

  1. Click Share from the upper left corner.
  2. Click the Embed button.

 

11-464634653.png
You'll get a preview of your embed with the option to change the title of the embedded map.  Use these options to select metric units, and to toggle the elevation profile, surface types, distance markers, and photos on the embed. 

 

11-484834613.png

 

Select the HTML code that is in Embed Code field, and COPY this code to use on your blog or website.

 

11-494934634.png

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.

In the sample embedded map below, you can:

  • Click View Full Version to view the ride page for more metrics, links to export, and other sharing options.
  • Send the route directly to your device.
  • Pan and zoom.
  • Click & drag the elevation graph to select parts of the route.
  • Change the map type.
  • Click on points of interest icons and photo clusters to see more detail. 

 

 

 

Tips on using the Embed

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
  • 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.
  • POI on routes will show up in the embed and can be clicked to show more information and photos.