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.
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.
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:
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:
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.
The trail-search-results.js file holds the setup code for just the search result pages.