Displaying a Google Map on the Trails Search Result Pages

It is common to show a large Google map on the trails app search results pages. That map often shows markers for the center point of each individual trail that matched the search results.

Below we will outline the general steps that you can use to setup this 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 Search Results content template. See Content Templates for more information. You will also then need to configure the Search Results layout. See Layouts for more information.

Template Code

The content template will be pretty simple because we will be loading the trail data via AJAX (see Loading the Trail Data).

Below is some basic sample code:

Javascript

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, trail list pages and the search result pages. In order to facilitate that we'll have another Javascript file specific to the search results 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-search-results.js

Loading the Trail Data

For performance reasons we utilize AJAX techniques to load trail markers after the initial page has loaded. This improves performance a lot by allowing the initial page to load quickly.

Right now there are not any JSON APIs within the Trails app so we simulate that with Pages, Content Layouts, Templates and Trail API tags.

An AJAX POST request is made submitting the IDs of the matching trails. The response is a JSON object of trail information.

The Template will contain nothing but the Trail API tag.

The page will be an empty page and it's only purpose is to provide a URL to call via AJAX. The result of loading that page will be the JSON provided by the content template setup below.

The Content Layout is used to capture the POST and pass the trail IDs to the Trail content template. The same API Content Template that was setup for the trails list pages can be used.

Create the Trail Filter API Content Template

If you didn't already create the Trail Filter API Content Template for the trail list pages then go ahead and create a new Trails app Content Template for the "API - Trail Filter" type. Call it "API - Trail Filter - Trail List AJAX Request".

Below is some sample code:

Change the "templateId" values to match the ID of the API - Trail Filter content template that you just created.

Change the "instanceKey" values to match the instance key for your Trails app instance.

Create the Template

Under Design -> Templates create a new template called "AJAX Trail List Search". Be sure to set the "What type of content is this template?" field to "JSON" since we want the correct response headers for JSON content to be returned. 

In the template code enter the following:

{ap_content}

Create the Content Layout

Under Content -> Content Layouts add a new Content Layout called "AJAX Trail List Search".

Content Layouts are usually used for entering content, but here we are using it simply to process logic. They need at least one field but since we're not taking any content the best field to add is a "Section Heading" field and just put in "No Content Here" as the field label.

Below is some sample code for the content layout.

IMPORTANT: You must set the "How to display the content" field for the Content Layout to be "Parse the content layout for each page request". If you don't do this the code will not be parsed on each request and you will not get the expected results.

Create the Page

Create a new page called "Trail List Search" with a URL of '/trail-list-search". Assign the "AJAX Trail List Search" template that you just created. 

After you create the page assign the "AJAX Trail List Search" Content Template to the main content block and save the page.

Javascript

We will use the same map.js Javascript that the Trail Detail page uses.

Trail-Search-Results.js

The trail-search-results.js file holds the setup code for just the search result pages.