Capra maps can be loaded into <iframe> elements for embedding on websites. This is usually done by pasting in embed code into a Code or Embed block in website content management systems.

Given the massive variety in website content management systems out there you may bump into a couple of stumbling blocks when first embedding. Here's an example of the embed code for the Spit to Manly track in Sydney.

You'll see in the code above that height and width of the map are set to 100% of the container size into which you're pasting the code. Commonly this means you may need to manually adjust the height and width of the container. This can be done in your CMS if you have the option, or you can manually edit the code.

If it suits your website use 1280 wide x 750px high dimensions.

Here's an example of a Squarespace website where the dimensions had to be changed manually in the code block.

Remember, if a user looks at the web page that has a Capra map on their mobile device they will automatically get a message providing the option to open the map directly in the Capra app. When you are adding website embed code the default embed block may be sized to trigger this mobile screen size message so you need to enlarge the block size.

Something to be aware of. One of our customers had to remove this dash to stop the code causing issues on their page.

If you want rounded corners for your embed add the following code after border: none; in the embed code

Embed maps can be set to show in imperial or metric units of measure.