WordPress Travel Map Plugin (CMMRM) - Free Version Tutorial


WordPress Travel Map Plugin - Free Version Tutorial

Back to User Guide

WordPress Travel Map Plugin

Learn more about Pro version of the WordPress Travel Map Plugin

This article covers only features present in the free version of the WordPress Travel Map Plugin. It shows you how to create a directory of routes on your site.

Example

Example of the routes index page - WordPress Plugin Show Route
Example of the routes index page
Enlarging images on the route page - Route Display WordPress
Enlarging images on the route page
User dashboard - Route Display Plugin
User dashboard

Table of Contents

  1. Installation guide
  2. List of Features
  3. Using the Plugin - Overview
  4. Initial Setup
    1. Google API Key
  5. Settings
    1. Navigation (Routes URL and Edit Form)
    2. General (Template, Units, Map Behavior, Custom CSS)
    3. Index Page
    4. Route Page
    5. User Dashboard

Installation guide

Here are the steps needed to install the plugin:

  1. Download - To manually install the plugin, you must first download it from CreativeMinds to your computer.
  2. Navigate to the Plugins tab in the WordPress Admin Panel to install the plugin.
Installing new plugin
Installing new plugin
  1. Activate the plugin. 

TIP: Register for Benefits

If you like, you can register your plugin to receive information about updates and our latest offers. You can complete your registration at any time. 

If you don’t want to register right away, you can select the Skip button.

Registering the plugin copy - Travel Plugins For WordPress
Registering the plugin copy

List of Features

Free Edition Pro Edition
Add unlimited routes Add unlimited routes
Google Maps integration Google Maps integration
Index page with all routes Customizable index page with all routes
- Maps have themes, layers and tiles
Users can post routes and have dashboard Users can post routes and have dashboard
Route has thumbnail and video Thumbnail, video and image gallery
Routes have generic icon Every route has a customizable icon
- Tags and categories to organize routes
- Import and export all routes via CSV
Search by route name Search by name, ZIP code and current user location
Interface in English Translate the plugin with customizable labels
No support Plugin can be used forever; one year support and updates

WordPress Travel Map Plugin

Learn more about Pro version of the WordPress Travel Map Plugin


Using the Free Plugin - Overview

TIP: Automatic Index and User Dashboard Pages

The plugin automatically creates:

  1. A Routes index page - All routes will be shown there. New routes are added automatically.
  2. A user dashboard page - Users can manage their routes and add new ones from there.
Links to the index page and user dashboard - Travel Map Plugin
Links to the index page and user dashboard

Admin - Adding and Managing Routes

You can add and manage routes from the back-end. Head to Admin Dashboard → CM Map Routes → Routes.

Managing routes on the back-end - WordPress Plugins For Travel Website
Managing routes on the back-end

User Dashboard - Adding and Managing Routes

Every route is "attached" to the user that created it, including the admin!

The user dashboard page lists all routes added by the currently logged-in user. As such, the content changes depending on who accesses it. There's also a handy Add route button.

Managing routes on the front-end - WordPress Plugins For Travel Blogs
Managing routes on the front-end

What Does It Look Like to Add a Route?

All users (including the admin) can add routes from a front-end form. It includes a series of fields, including a Google Map where the user can draw the route. Here is a sample of the form:

Editing the route - Travel Map WordPress Plugin
Editing the route

Initial Setup

A core aspect of the plugin is showing routes on a Google Map. To do so, you require creating and then add a Google Maps API key into the plugin.

Important

  • Starting from July 2018, Google Maps, Routes, and Places require billing information, such as an associated credit card.
  • The pricing system also changed, but in practice, the services are still free for limited use.

Read more

Google API Keys - Obtaining the Google API Key

To obtain the Google API key, follow these steps:

  1. Head to the Google Developers webpage.
  2. Log in to your Google account.
  3. Go to your project or create a new one.
Choosing the project
Choosing the project
Creating new project
Creating new project
  1. Head to APIs & Services and then Library:
Navigation to the Library page
Navigation to the Library page
  1. Select one of the API from the list. You may have to search for it by using the search bar.
Choosing needed API
Choosing needed API
  1. This page is important. In it, you can enable the API and find resources about it. Click Enable:
Enabling needed API
Enabling needed API
  1. Repeat steps 5 and 6 for all the API keys you need to enable:
    1. JavaScript API
    2. Geocoding API
    3. Places API
    4. Static API
    5. Elevation API 
    6. Directions API
  2. After you have enabled all the API Keys, activate the sidebar menu and click on Credentials. You will find the API key there, ready to be copied and pasted into the plugin's settings.
Where to find the generated API key
Where to find the generated API key

Billing

Also, if you have still not enabled billing, you can do so by activating the sidebar menu and then selecting Billing.

Billing page
Billing page

Then click Link a billing account and follow the steps.

Linking a billing account
Linking a billing account

Adding Key to Plugin

Once you have the key, adding it to the plugin is easy. Head to the Setup tab and copy it to the Google Maps App key field.

In the same setting, you can click Test Configuration to ensure the connection is working.

Adding generated Google API key to the plugin - Add WordPress Plugin Of Travel Map
Adding generated Google API key to the plugin

Still in the same Setup tab, you have an important setting.
  • Permalink prefix - The prefix of the index and routes' permalinks.

    For example, "map-routes" will generate permalinks such as: site.com/map-routes/mountain-trail.

    By default, it's "map-routes".


Settings - General (Template, Units, Map Behavior, Custom CSS)

General plugin settings - WordPress + Map Show Route Between Markers
General plugin settings

In this tab, you can configure the overall plugin behavior and appearance.

Template
  • Page template: Choose the page template of the current theme or set default.
  • Other page template file - Enter the other name of the page template if your template is not on the list above. This option has priority over the selected page template. Leave blank to reset.

    Advanced!

    Editing templates is an advanced process that may require HTML, CSS and coding skills.

    Make sure to back up all files before saving changes. This article provides examples of changes, but they are illustrative and not meant to be followed literally.

    General Support - Advanced - Creating and Editing Custom Templates

Appearance
  • Default map view - Choose between
    • road map
    • terrain
    • pure satellite without labels
    • hybrid: satellite + labels
  • Zoom map when using mouse wheel - If enabled, scrolling the mouse when it's over the map will zoom out or zoom in.
Custom CSS

You can enter a custom CSS which will be embedded on every page that contains a WordPress Travel Map plugin interface.

Quick Read

What is CSS

CSS allows you to make changes that WordPress, themes and even the plugins don't support. Be sure to test all changes before applying!

Learn more: General Support - Advanced - Custom CSS

CreativeMinds Can Help

If you prefer not modifying CSS and visual elements by yourself, CreativeMinds can help to adapt CM plugins to your theme.

Learn more: Plugin Installation Service for WordPress by CreativeMinds

Units
  • Length unit - Choose between:
    • meters
    • feet

Settings - Index Page

You can configure everything related to the index page in this tab. 

Index page settings - WordPress Travel Map Plugin
Index page settings
Pagination, order, search
  • Routes per page - Limit the routes visible on each page. The default is 10.
Appearance
  • Information visible on the index page - Show or hide
    • Distance
    • Duration
    • Max elevation
    • Min elevation
    • Climb
    • Descent
    • AVG Speed
    • Featured image
    • Publish date
    • Author

      Where The Fields Are

      Front-end example of the route details visible on the index page - WordPress Plugin Show Route
      Front-end example of the route details visible on the index page
  • Text on top - Enter what is displayed on the top of the index page, below the page title.

    Highlighted Example

    Example of the text at the top of the index page - Route Display WordPress
    Example of the text at the top of the index page

Route's featured image - Choose between:

  • First route image
  • Map thumbnail
  • Route's default image - Useful for branding.

Settings - Route Page

You can configure everything related to the route page in this tab. 

Tip: Description is Always Show

You can show or hide some elements, but the route description will always be shown.

Route page settings - Route Display Plugin
Route page settings
Appearance
  • Information visible on the index page - Show or hide:
      • Distance
      • Duration
      • Max elevation
      • Min elevation
      • Climb
      • Descent
      • AVG Speed
      • Location altitude
      • Location address

        Highlighted Example

        Front-end example of the route details - Travel Plugins For WordPress
        Front-end example of the route details

  • Enable WP Comments - Disable to hide the comments fields.

Settings - User Dashboard Page

Dashboard settings - Travel Map Plugin
Dashboard settings
Editor
  • Enable rich text editor - Allow or not users to use the WYSIWYG editor when creating the route description. If disabled, a simple textarea will be displayed.
Map default position
  • Editor default route's latitude - By default, 0.
  • Editor default route's longitude - By default, 0.
  • Editor default zoom - Higher number means closer. By default, 5.

More information about the WordPress Travel Map Plugin

Other WordPress products can be found at CreativeMinds WordPress Store

Let us know how we can Improve this Product Documentation Page

To open a Support Ticket visit our support center
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.