How to display the elevation chart on a different position of your site

Posted on 11 July, 2019

Category:

User guides

Topic:

GPX elevation charts

By default GPX elevation charts are displayed beyond the map that the GPX track is assigned too.

You can separate the GPX elevation chart from the map though by following these steps:

  1. create a <div> element with the ID, width & height attributes where you want the elevation chart to appear,
    e.g. <div id="chart-area" style="width:600px;height:400px;"></div>
  2. on this page, use the following shortcode, example for map with ID 1:
    [mapsmarker map="1" chart="chart-area"]

As a result, the elevation chart will be loaded within this <div>.