Displaying a Google Map on the Trail Detail Page

When you are displaying the individual trail detail page you often want to show a large Google map showing the line segments for the trail and any trail features. 

Below we will outline the general steps that you can use to setup a Google map. 

Note - you can use any map provider. We are simply using Google maps in this example. Also, this isn't the only way to integrate a map. With BranchCMS you have full control over all of your Javascript, CSS and HTML and can use a different method to load your map.

Setup the Content Template

You will first need to create a Trail Detail content template. See Content Templates for more information. You will also then need to configure the Trail Detail layout. See Layouts for more information.

Template Code

Here is a basic set of code for the content template. It shows the trail name, sets the <div> that will show the map canvas and sets up the Javascript that will be used to display trail line segments and feature points.

Javascript Files

You will need to load the Google Maps API Javascript:

https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY

In our example we're going to have another Javascript file called map.js that contains the code to setup the map. The intention is that this same file could be used for the trail detail, the trail list pages and the search result pages. In order to facilitate that we'll have another Javascript file specific to the trail detail page to set things up there.

You could load the Javascript files in your site template or like in this example they could be specified in the Javascript Files part of the Content Template. Doing that allows you to keep your site templates more generic and not specific to a single page type. 

We're going to add the following code to the Javascript Files field in the Content Template:

https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY
/layout/js/map.js
/layout/js/trail-detail.js

Map.js

The map.js file is where the Google map gets initialized, the markers get setup and the line segments get created. 

Trail-detail.js

The trail-detail.js file holds the setup code for just the trail detail page.