Skip to main content

Use HTML to add multiple media elements to a marker

  • Updated

In this example, we’ll copy the embed code from two source websites: a YouTube video and a SoundCloud track.

Note: The embed code will usually be inside an <iframe> tag.

 

Open the HTML field in the marker editor window

  1. Select the Edit/Measure Tool in the top toolbar.
    Quick Key: Or you can press the "Q" button on your keyboard.
     
  2. In the Map View, click on the marker.
    The info bubble and marker editor window will pop up.
     
  3. At the bottom of the window, click on the "Advanced Editing" link.
     
  4. At the bottom-right corner of the "Description" field, click on the "HTML" tab.
    The description field will now be enabled for HTML code.
 

Add the YouTube video’s embed code

To learn how to copy the YouTube video’s embed code:
  1. On the YouTube video’s page, click on the "SHARE" button.
     
  2. Click the "Embed" button.
     
  3. Click on the code. Then copy the code by pressing
    • Quick Key: Ctrl+C (for Windows).
    • Quick Key: Cmd+C (For Mac).
  1. Click on the "Description" field. Then paste the code by pressing:
    • Quick Key: Ctrl+V (for Windows).
    • Quick Key: Cmd+V (For Mac).
     
  2. Click on the "Save" button.
 

Add the SoundCloud track’s embed code

To learn how to copy the SoundCloud track’s embed code:
  1. On the SoundCloud track’s page, click the "Share" button.
     
  2. Click the "Embed" tab.
     
  3. Click on the code. Then copy the code by pressing
    • Quick Key: Ctrl+C (for Windows).
    • Quick Key: Cmd+C (For Mac).
  1. Click on the "Description" field. Then paste the code by pressing:
    • Quick Key: Ctrl+V (for Windows).
    • Quick Key: Cmd+V (For Mac).
     
  2. Click on the "Save" button.
 

Test the display of the media elements

  1. To test the video and the track, select the Hand Tool in the top toolbar.
     
  2. In the Map View, click on the marker.
    The description will include the YouTube video and/or the SoundCloud track.
     
 

Related article

If you want the map to continuously display information about the marker, you can add a label next to the marker. To learn how; visit this link: Label Tool—Create a label.

 
 

Comments

0 comments

Article is closed for comments.