How To Create an Embeddable Trail Map and Share it in a Website, Facebook, or Twitter

Overview

Embeddable maps are a great way to feature trails, GPS tracks, and mobile maps. You can create embeddable maps to share on a website or Facebook or Twitter Timeline. You can also create an interactive trail map tab on a Facebook page that features a embeddable map.

Watch the video, and/or read the instructions below.


Embed Example

Crested Butte Mountain Bike Association 2015 Epic Dope Loop Ride


Instructions

There are two steps:

  1. Create an Embeddable trail map
  2. Share Embed on website, Facebook, or Twitter

First, Create an Embeddable Trail Map

Required *(Login, Title, Save)

Login*

Go to juicytrails.com, create an account, and login.

Create New Embed*

create-new-embed

From your JuicyTrails user account dashboard click "Embeds" and then the "New Embed" button.

Title*

embed-title

Give your embed a good title.

Slug

embed-title

A slug will be autogenerated. Use the autogenerated slug unless it isn't available. When you create an embed, a bit of iframe code is generated based on the slug. Therefore, changing the slug changes the iframe code. So if you embed the map into website using the iframe code provided and then change the slug, the iframe code will change, which means you'll need to reinsert the new iframe code for the embed to continue to show.

Move Map to Address

embed-address

You can enter a [city, state] to move the map to the near the area you'd like to feature the map. Searching for landmarks works sometimes, but not all the time because the landmark has to appear in OpenStreetMap data for a landmark result to return.

Map Area and Tracks

map-embed-area-and-tracks

Pan and Zoom (in or out) the map to the area you'd like to feature in the embed. You can create an embed of a plain map or you can include one or more tracks to feature in the map as well. A list of your tracks will appear below the map (located within viewing area of the map) that you can select. You can also select from other listed tracks by deselecting the "Only show my own tracks in the list" checkbox. Note, tracks must be "listed" in order for them for be available for inclusion in the embed.

Map Options

map-embed-options

The following map embed options are available:

  • Hide Maps Layer - Hides all map downloads from the map.
  • Disable Tracks - Hides all tracks from the map, even if you've selected tracks to include.
  • Only Show Recommended Tracks - At this time tracks can only be recommended from the site administrators. So you probably don't what to check this.
  • Show Track Waypoints - Shows waypoints for the selected track or for recommended tracks in the map embed.

Embed Height

embed-height

This determines the height of the embed in pixels. The map center latitude/longitude, zoom level, and embed width values are all automatically generated from the position of the map embed as shown in the map area.

Choose Map Download

choose-map-download

A map download button can be included in an embed. Select one from the drop-down list to give users the ability to download the offline mobile map you selected.

Facebook

embed-facebook-share

Save*

save

Be sure to save.

Second, share on website, Facebook, or Twitter

After you have saved an embeddable map, you can share it from the embeddable map "View" page.

Embed on a website

juicytrails-iframe-embed

Copy and paste the map embed iframe html into a website to display it in a website.

Embed as a Facebook Page Tab

embed-as-facebook-tab

Facebook tabs provide a way to make content permanently available on a Facebook Page. We cover how to do this here.

Facebook Share

embed-facebook-share

Click the Facebook Share button.

embed-share-facebook-share-window

A Facebook window will open allowing you to share the embeddable map in your own timeline or a page timeline that you manage.

Twitter Share

embed-twitter-share

Click the Tweet button.

A Twitter window will open allowing you to share a link of the embedabble map to Twitter.