How to Display a Travel Itinerary on the Map - Using MB Views

Make your travel website more attractive and intuitive by displaying the destination as an itinerary on a map instead of showing the itinerary in text or timeline format. This becomes an easy task with MB Views from Meta Box in this guide.

I have a single page for a tour as an example:

On the map, we’ll have these functionalities:

• Each destination in the tour is marked with a number on the map. They are connected by lines.
• Quickly see the distance between stops.
• When you click on a specific day, the map automatically centers to the corresponding destination, along with its details.

We also suggest the two destination tabs, on the sidebar, or the content area.

Displaying destinations by itinerary on the map is useful in many cases:

• Travel blogs and tour websites: provides a clear overview of the entire trip, helping customers explore each stop directly on the map before booking.
• Hotels and resorts: showcase nearby attractions, giving guests a better sense of what's around the property.
• Food tour: recommend the best local eateries along the route.
  …

Before building it step by step, let’s check some tools we need for this practice.

Video Version

Before Getting Started

Each tour is a post of the custom post type. And the detailed information will be saved in custom fields. In there, each destination of days in the itinerary is an item of a cloneable group. After having all the needed content, I use MB Views to display it in the itinerary format on the map.

So, I highly recommend you use Meta Box AIO to have both the framework and advanced features from all the Meta Box extensions. These are extensions we use:

• MB Custom Post Type: to create a custom post type for tours.
• MB Builder: to have UI in the backend to create custom fields visually.
• MB Group: to organize custom fields into groups for easier management.
• MB Views: to create a view to display data in the itinerary.

Now, let's dive in.

Create Custom Post Type and Custom Fields

We have some tutorials that focus on creating a custom post type and custom fields. So, I skipped it to save time; you can check them for more details. I’ve already created the tour post type and a field group for it.

(image)

The group is for the destination is cloneable since there is more than one stop in a tour.

When you create a new tour, you can see the created fields. Fill in data for them.

Display Data on the Map

In this step, we’ll get data and display it on the map on the frontend. Transforming it to itinerary will be done later.

Get Data

Go to Meta Box > Views, and create a new view.

In the Template tab, to get and display data, you can add code directly or use the Insert Field button, then pick the field you want to insert from the list.

(image)

After inserting all the fields you want to get data from, move to the Settings section to set the Type of the view as Singular, and choose Tour.

(image)

Then, when you view the post on the frontend, you can see all the data is displayed but in text and image format only.

Display Destinations on Map and Tabs

I’ll update the view to style the destination in tabs, and add a map to the single page, by adding some code.

(image)

In there:

First, I load the icon for the total duration of the tour, and declare that we’ll use the JavaScript library for the map.

To calculate the duration, I add:

{% set total_stops = post.schedule|length %}
{% set nights = total_stops - 1 %}

The number of days is determined by the number of items in the schedule field. We then subtract one to calculate the number of nights.

I’m adding some div tags and classes, as well as modifying the code for styling later. I also tweak the price format a bit to make it easier to read.

I want to display the days as tabs, so I add this part:

<div class="day-tabs">
<button class="day-tab active" data-day="all">All</button>
{% for clone in post.schedule %}
<button class="day-tab" data-day="{{ loop.index }}">Day {{ loop.index }}</button>
{% endfor %}

It includes the "All" tab, allowing visitors to view all destinations at once, and tabs for days. Then, I loop through the schedule field. For each item, I generate a button labeled "Day 1", "Day 2", and so on. I use the data-day attribute to store the day number, which we'll use later to filter the corresponding destinations on the map.

Add Interactivity to the Map

Last Words

• How To Display All Listings On A Map With Meta Box
• Insert Google Maps to a Website using Custom Fields
• How to Search Posts on a Map - Using MB Views
• How to Search Nearby Shops and Get Directions on a Map Listing - Using MB Views
• How to Display a Travel Itinerary on the Map - Using MB Views