How do I embed a live race map on my own website?

The simplest way is to use a race-tracking service that provides an embed code. You set up the event and its live tracking with the service, then place its map on your site in an iframe.

For example, RACEMAP’s embed format looks like this—replace the sample event slug with yours:

<iframe
  src="https://racemap.com/player/YOUR-EVENT-SLUG"
  title="Live race map"
  style="width:100%; height:700px; border:0;"
  loading="lazy"
  allowfullscreen>
</iframe>

RACEMAP also provides separate pages for live timing and rankings, which you can embed similarly. (docs.racemap.com)

Steps:

1. Choose a tracking provider that supports your event and the devices or apps participants will use.
2. Create the event and configure the course, participant tracking, and what information is public.
3. Copy the provider’s iframe snippet—or use its map URL as the iframe’s src.
4. Paste it into an HTML/embed block in your site editor, then check it on mobile.

If you’re organizing an outdoor event, Owaka is another service that offers a public live map and iframe integration. (owaka.live)

A live map needs more than the webpage embed: participant positions must be supplied by GPS trackers, phones, or another timing/tracking system. If you meant a motorsport race map rather than an event-tracking map, tell me which series or data feed you have in mind—the setup can be different.

The right method depends on where your live data comes from. Most live race maps are embedded with an iframe, a snippet of HTML that loads the map from the provider's site.

If your race already uses a timing or tracking provider

Check whether the provider offers an embed. RaceMap, for example, provides an iframe for its tracking map, leaderboard, and live rankings, and it lets you set width, height, and border styling through inline CSS. Easily embed live tracking, leaderboards, live rankings, and the monitor on any webpage using an iFrame. Each event also has a stable URL based on its slug. Each event has a unique URL for the tracking map and leaderboard.

Other examples include Trackleaders, which has an embed code for its RAAM 2026 tracking map, and RunnerBeam, which advertises embeddable race maps for organizers. For timing results, RaceHero offers copy-and-paste snippets that keep a feed updated automatically.

If you're tracking athletes with your own GPS devices

GPS tracking services generally offer an iframe too. FollowMee, for instance, embeds a map by inserting an iframe string into your web page. Greenalp describes a similar setup. Be careful with these: FollowMee notes that when you share your map, your API key is exposed publicly. Some services also require a paid plan before embedding, so check pricing first.

If you only need a course map (not live positions)

Several tools produce embeddable course maps. Race Entry lets you copy the HTML and paste it into your website after you set its size and colors. Race Day Map offers embeds on a paid plan, and HelloDrifter has a paid embed plan as well. Google My Maps can also produce an embed code through its share settings.

General steps

1. Get the embed snippet from your provider's dashboard or share menu.
2. Paste it into the HTML of the page where you want the map. On WordPress, use a custom HTML block.
3. Set the width and height in the snippet. A width of 100% and a fixed height usually look best on mobile.
4. Test on a phone, since some providers restrict framing or require you to enable it in account settings.

If you tell me which tracking or timing system your race uses (or whether you're using your own GPS trackers), I can point you to the specific embed steps.

To embed a live race map on your website, you generally use an iFrame, which is a standard HTML element that allows you to display content from another website directly within your own page.

The process typically involves choosing a live tracking provider, configuring your event, and copying a provided snippet of code. Here is the step-by-step approach to getting this set up.

1. Choose a Live Tracking Platform

You will need a platform that manages the GPS data and provides the embeddable map interface. Popular options include:

• RACEMAP: Offers robust embedding for live tracking, leaderboards, and rankings.
• Webscorer: Provides GPS tracking via a smartphone app and allows you to embed the live results/map page.
• HelloDrifter: Specializes in interactive 3D course maps that can be embedded with a single line of code.
• GEORACING / Tracktherace: Often used for professional sports events, offering customizable, interactive maps.
• Greenalp: A simpler option for embedding basic live GPS tracking maps.

2. Configure Your Map

Once you have chosen a service, you will generally follow these steps on their dashboard:

• Create Your Event: Input your race details and upload your GPX/route file.
• Customize: Select the map style, decide which information to show (e.g., aid stations, elevation profiles, or leaderboards), and adjust branding colors to match your site.
• Generate the Embed Code: Look for a "Share," "Embed," or "Publish" button in the platform’s settings. The platform will provide an <iframe> snippet (a short block of HTML code).

3. Embed the Code on Your Website

After copying the embed code from the tracking platform, paste it into your website:

• WordPress: Use a "Custom HTML" block or "Embed" block to paste the code.
• Wix / Squarespace / Webflow: Look for the "Embed Code" or "HTML" element in your site editor and paste the snippet there.
• Custom HTML: Simply paste the <iframe> tag into the source code of your page where you want the map to appear.

Key Tips for a Smooth Setup

• Responsive Design: If possible, ensure the iframe is set to width="100%" in the code so it scales correctly on mobile devices and desktops.
• Testing: Test the embed well before race day. Some platforms provide a "preview" mode to ensure the map loads correctly on your specific site layout.
• Refresh Rates: Check the platform's documentation regarding how often the data refreshes. Some services update automatically every minute, which is crucial for a "live" experience.

The easiest way is to use the embed link provided by the race-tracking service hosting the live map. For example, RACEMAP supports embedding its event map in an iframe. ¹

<iframe
  src="https://racemap.com/player/YOUR_EVENT_SLUG"
  title="Live race map"
  style="width:100%; height:700px; border:0"
  loading="lazy"
  allowfullscreen>
</iframe>

Replace YOUR_EVENT_SLUG with your event’s map slug or event ID. The service’s documentation says each event has a unique map URL, and the map, live rankings, and leaderboard can be embedded this way. ¹

To add it to your site:

1. Find the public live-map URL or embed code in your race-tracking provider’s event settings.
2. Paste the iframe into your page’s HTML or a site-builder “Embed/Custom HTML” block.
3. Adjust the height and width, then preview it on desktop and mobile.
4. Check that the map is publicly viewable and that your provider permits embedding; some websites block iframe embeds.

If you use another platform, look for an “Embed,” “Website integration,” or “Share map” option. Some timing platforms offer a map or participant view that can be embedded or displayed with live updates. ³ Sources: ^{1 3}