Appearance
Route Planner
The Route Planner widget displays interactive routes with turn-by-turn directions. Pull waypoints from repeater fields, post relations, or individual location fields to create multi-stop routes on an interactive map.
Overview
Display routes between multiple locations on an interactive map. Users can switch travel modes, reorder stops, and export routes to Google Maps, Apple Maps, or GPX files. Perfect for tour guides, delivery routes, property tours, or any multi-stop itinerary.
Key Features
- Multiple data sources (repeater, post relation, post fields)
- Map providers: Google Maps, Mapbox, OpenStreetMap
- Travel modes: driving, walking, cycling, transit
- User GPS location as starting point
- Drag to reorder waypoints
- Route optimization
- Turn-by-turn directions panel
- Export to Google Maps, Apple Maps, GPX
- Full Elementor styling controls
Setup Instructions
Step 1: Enable the Widget
- Navigate to Voxel Toolkit → Widgets in your WordPress admin
- Find Route Planner in the list
- Toggle the switch to enable the widget
- Click Save Changes
Step 2: Add to Template
- Edit your page or template in Elementor
- Search for Route Planner (VT)
- Drag the widget to your layout
- Configure data source and settings
- Save the template
Step 3: Configure Your Sources
- Select your source
- When it asks you for the key, do NOT use dynamic tags. Manually type in your location field key. Which will most likely be just location
Data Sources
The widget can pull waypoint locations from three types of sources:
Repeater Field
Use a repeater field containing location sub-fields. Each repeater row becomes a waypoint.
- Select the repeater field
- Select the location sub-field within the repeater
- Optionally select a title sub-field for waypoint names
Post Relation Field
Use a post relation field to pull locations from related posts.
- Select the post relation field
- Select the location field on the related post type
- Related post titles are used as waypoint names
Post Fields
Use multiple individual location fields from the current post.
- Select multiple location fields
- Each field becomes a waypoint
- Field labels are used as waypoint names
Map Providers
| Provider | Requirements | Features |
|---|---|---|
| Google Maps | API key in Voxel settings | Best routing, transit support |
| Mapbox | Access token in Voxel settings | Customizable styles, good routing |
| OpenStreetMap | None (uses OSRM) | Free, basic routing |
Travel Modes
Users can switch between travel modes (when enabled):
- Driving – Car/vehicle routing
- Walking – Pedestrian routes
- Cycling – Bike-friendly routes
- Transit – Public transportation (Google Maps only)
Starting Point Options
| Option | Description |
|---|---|
| First Waypoint | Route starts from the first location in the list |
| User GPS | Requests user location and starts from there |
| Custom Address | Specify a fixed starting address |
Interactive Features
Drag to Reorder
Users can drag waypoints in the list to reorder them. The route automatically recalculates.
Route Optimization
Enable the “Optimize Route” button to automatically reorder stops for the shortest total distance using the nearest neighbor algorithm.
Step Highlighting
Clicking a step in the directions panel highlights that segment on the map.
Marker Popups
Clicking map markers shows a popup with stop details.
Directions Panel
The directions panel shows:
- Step-by-step turn instructions
- Distance for each step
- Total route distance and duration
- Waypoint list with addresses
Export Options
Users can export routes for use in other apps:
- Open in Google Maps – Opens route in Google Maps app/website
- Open in Apple Maps – Opens route in Apple Maps (iOS/macOS)
- Download GPX – Downloads GPX file for GPS devices
Styling Options
Full Elementor styling controls for:
Map
- Height
- Border radius
- Box shadow
Route Line
- Line color
- Line width
- Line opacity
Markers
- Custom marker icons
- Marker size
- Marker color
Panel
- Background color
- Text colors
- Typography
- Padding
Use Cases
Tour Guides
Create walking tours with multiple stops, exportable for tourists to follow.
Property Tours
Show routes between multiple properties for real estate viewings.
Delivery Routes
Display optimized delivery routes with multiple stops.
Road Trips
Plan road trip itineraries with multiple destinations.
Troubleshooting
Map Not Loading
- Check that API keys are configured in Voxel settings
- Verify the map provider is selected correctly
- Check browser console for API errors
Route Not Calculating
- Ensure at least 2 waypoints have valid coordinates
- Check that locations have latitude/longitude data
- Verify the data source is configured correctly
GPS Location Not Working
- Site must use HTTPS for geolocation
- User must grant location permission
- Falls back to first waypoint if denied
Requirements
- Map API key (Google/Mapbox) or OSRM for OpenStreetMap