How to Embed CBGTrails Maps On Your Website

Overview

The Tourism and Prosperity Partnership (TaPP) created the CBGTrails app, website, and interactive map to ensure that locals and visitors have accurate Summer and Winter trail maps and information. Any Gunnison County organization can embed this map on their website for free thanks to TaPP. CBGTrails users can post trail observations (i.e., reports, signs, and trailheads) via the embeddable interactive map posted on your site or via the CBGTrails mobile app. Trail report observations are specifically designed to help trail volunteers, trail organizations and land managers keep the trail in tip-top shape. Trailhead observations are intended for users to crowdsource formal trailheads (no map currently has all of them). We attach Google Map directions to the trailhead markers so everyone can easily find them. Users can crowdsource pictures of trail signs along with the official, designated activities. We use anonymized, unpublished data plus the crowdsourced trail sign pictures to accurately map trails. Embedding the CBGTrails interactive map on your website will provide your users with the most accurate summer and winter mobile trail maps available for the Gunnison Country region. Moreover, you'll enable your website users to crowdsource trail information that will make the trails better and continually improve the trail map.

Note, an example interactive map, required text and app store links are presented at the end of this guide.

Map Embed Instructions

Embedding CBGTrails maps on your website will require tailoring a bit of HTML inline frame (iframe) code you can drop in almost every kind of website, including Wordpress. You don’t need any experience writing HTML code because we walk you through all the steps below.

Default iframe code

The default iframe code is marked up as follows.

<iframe src="https://www.cbgtrails.com/map/embed"></iframe>

And, it will produce the CBGTrails default interactive map.

The default embed above is obviously too small, it’s centered over Crested Butte, and it shows the summer map style by default: not the winter map style. Therefore, we provide some customizable parameters, including:

  • map size
  • latitude/longitude map centering
  • map zoom
  • map style

Map Size

As explained above, the default map size is too small to be effective. The minimum sufficient size has a height of 300px by a width of 600px.

<iframe src="https://www.cbgtrails.com/map/embed/" height="300" width="600"><iframe>

However, a 300px by 600px map is still unlikely large enough. Increase the size as needed. It is also possible to adjust the height and width as a percentage of its container. For example, increase the width of the map to 100% of its container.

<iframe src="https://www.cbgtrails.com/map/embed/" height="600" width="100%"></iframe>

Longitude/Latitude Map Centering

To center the map anywhere besides Crested Butte adjust the longitude and latitude parameters.

<iframe src="https://www.cbgtrails.com/map/embed?longitude=-106.952497&latitude=38.484903" height="600" width="100%"></iframe>

Map Zoom

As seen in the map above, the map is zoomed in too far to see the entire Hartman Rocks trail network. The map area displayed is controlled by the map zoom level. Combine it with the latitude and longitude parameters with the “&” symbol.

<iframe src="https://www.cbgtrails.com/map/embed?longitude=-106.952497&latitude=38.484903&zoom=11" height="600" width="100%"></iframe>

Winter Map Style

Implement the CBGTrails interactive winter map style by adding the “style=winter” parameter.

<iframe src="https://www.cbgtrails.com/map/embed?style=winter&zoom=10.5" height="600" width="100%"></iframe>

Img

Note, the winter map above is static. The Winter Map embed will be interactive on your website.

Example Interactive Map Embed

Crested Butte Interactive Trail Map

Get the CBGTrails Mobile App

The Crested Butte/Gunnison Trails mobile app is the official trail map app for the area and includes ALL the system trails color-coded by designated activities. Get the CBGTrails app and follow this map offline on your phone, even without a cell connection. And, while your at it, you can record tracks, make observations, and Play TrailQuest!

CBGTrails app store

CBGTrails app store


Text and App Store Button Requirements for Map Embeds

Sites that embed the CBGTrails Interactive Map should include the text and app store buttons shown above on trail map landing pages to direct users to the mobile app. Subpages (e.g. map embeds of specific trails) do not require the text and app store button links.

Feel free to use this HTML code block to insert the text and app store button links.

<h3 style="text-align:center;">Get the CBGTrails Mobile App</h3>
<p>The Crested Butte/Gunnison Trails mobile app is the official trail map app for the area and includes ALL the system trails. Get the CBGTrails app and follow this map offline, even without a cell connection, on your phone. And, while your at it, you can record tracks, make observations, and Play <a href="https://www.cbgtrails.com/pages/play">TrailQuest!</a></p>
<p style="text-align:center;"<img src="https://a.storyblok.com/f/56672/289x289/9276d33ca3/cbgtrails.png" alt="CBGTrails logo">
<p style="text-align:center;"><a href="https://apps.apple.com/us/app/cbgtrails/id1119377630"><img src="https://a.storyblok.com/f/56672/200x59/5707cdb8e6/appstore200.png" alt="CBGTrails app store"></a></p>
<p style="text-align:center;"><a href="https://play.google.com/store/apps/details?id=us.gomaps.cbgtrailsmap&hl=en_US"><img src="https://a.storyblok.com/f/56672/200x59/5d6027f44d/googleplay200.png" alt="CBGTrails app store"></a></p>

Questions?

Contact Derrick Nehrenberg, d@traildock.com.