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

If you mean live participant tracking, the easiest way is to use your race-tracking provider’s embed/iframe. The provider hosts the map and updates it; your site displays it.

1. Get the embed URL

Ask your timing or tracking provider for the event’s public tracking-map URL or embed code. For example, RACEMAP provides a unique event map URL and supports embedding it with an iframe. (docs.racemap.com)

2. Add it to your page

Paste the provider’s URL into an iframe, replacing the example URL below:

<div class="race-map">
  <iframe
    src="https://racemap.com/player/YOUR_EVENT"
    title="Live race tracking map"
    loading="lazy"
    allow="geolocation 'src'"
    allowfullscreen>
  </iframe>
</div>

<style>
  .race-map {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 420px;
  }

  .race-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }
</style>

Use the exact URL or code your provider supplies—the example event name is just a placeholder. If you want a leaderboard too, some providers offer a separate URL or embed for that. (docs.racemap.com)

If you don’t have a tracking provider

A course map alone can show the route, but a live map also needs location data from participants’ phones or GPS trackers, plus a service that receives and displays that data. Some event-map services let you add a route and embed the map, then connect live locations. (kartava.app)

If you tell me what kind of race it is and what platform or website builder you use, I can tailor the steps and code.

The method depends on your timing provider, but most work the same way: the provider hosts the live map, and you paste an iframe snippet into your page.

Steps

1. Get the map's embed code from your timing or tracking provider. Many services offer a share or embed option for each event. RaceMap, for example, lets you embed its tracking map, leaderboard, and live rankings with an iframe, and each event has a stable URL. Easily embed live tracking, leaderboards, live rankings, and the monitor on any webpage using an iFrame. If your provider doesn't offer an embed option, ask them. Some providers gate embedding behind a paid tier. Greenalp, for instance, requires buying a "Website Framing" permission before its iframe works.

1. Paste the snippet into your page's HTML. Put it where you want the map to appear. On WordPress, switch the editor to its HTML or code view first. Some hosted platforms block iframes on lower-tier plans, so check your platform's rules if the map doesn't show.

1. Set the size. Use the width and height the provider gives you, or make the frame responsive with CSS so it scales on phones. Waze's documentation suggests common CSS techniques to set the iFrame size automatically, based on the screen size.

1. Tune the view with URL parameters if needed. Many providers let you change the zoom or map style through the link. For example, Greenalp lets you append the zoom parameter to your iframe URL (e.g. "&zoom=14").

Example of the general pattern

<iframe src="https://PROVIDER-URL/your-event-slug"
        width="100%" height="600"
        style="border:0;" loading="lazy"
        allowfullscreen></iframe>

Replace the src with the link your provider gives you. The loading="lazy" attribute lets the rest of your page load before the map.

If you tell me which tracking service your race uses, I can give you the exact steps for it.

Embedding a live race map on your website is typically a straightforward process that involves using an iframe—a small piece of HTML code provided by your tracking service that allows their interactive map to display directly within your webpage.

Because "live" tracking requires constant GPS data updates and a server to manage that information, you will need to partner with a specialized race-tracking service.

Step-by-Step Guide to Embedding a Live Map

1. Choose a Tracking Provider

You must use a platform that supports live tracking and provides an embeddable widget. Popular services used by race organizers include:

• RACEMAP: Offers robust tools for live tracking, leaderboards, and map visualization.
• HelloDrifter: Specializes in 3D course maps and elevation profiles.
• Webscorer: Uses participant smartphones for real-time GPS tracking.
• Geo Tracks: Provides professional-grade GPS tracking and embeddable map views.
• MYLAPS: Often used for larger, professional-timed events with integrated apps.

2. Configure Your Map

Once you have set up your event on the provider's platform (usually by uploading a GPX file of your course and configuring participant tracking), navigate to the "Share" or "Embed" section of your organizer dashboard.

• Adjust settings such as the map size, zoom level, which features are visible (e.g., leaderboards, points of interest), and the overall look to match your brand.

3. Generate and Copy the Embed Code

The service will provide you with a snippet of code, typically starting with <iframe...>.

• This code acts as a "window" that pulls the live data from their server and displays it on your site without requiring you to build custom software.

4. Paste Into Your Website

You can add this code to almost any website builder (WordPress, Squarespace, Wix, Webflow, etc.) by using a Custom HTML or Embed block.

• WordPress: Use the "Custom HTML" block.
• Wix/Squarespace: Look for the "Embed Code" or "Iframe" widget.
• Custom HTML/CSS: Simply paste the code directly into your page's source code where you want the map to appear.

Key Tips for Success

• Test on Mobile: Since many spectators will check the map on their phones while at the race, ensure the iframe is responsive (most platforms provide code that automatically adjusts to mobile screen sizes).
• Keep it Simple: If you only need a static course map rather than live participant tracking, tools like RunSignup or RunGo offer easier, dedicated integrations for course display.
• Performance: Check if your provider's map "lazy loads"—meaning it only consumes data when a visitor actually clicks on it—which helps keep your race website fast.

The simplest option is to use the embed code from your live-tracking provider. For example, RACEMAP provides an event-specific tracking-map URL that you can put 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. Make sure the race is set up with the provider and that live location data is being supplied; an iframe displays the map, but doesn’t create the tracking data itself. RACEMAP also documents ways to embed leaderboards and customize map views ¹².

If your provider doesn’t offer an iframe, check whether it has an embeddable widget or API. For a custom map built with an API, you’ll need to handle map rendering and live-data updates yourself. If you use an iframe, test it on mobile and check that your site’s content-security settings allow the provider to load.