Google Maps plugin for Craft CMS

GPX Tracks

If you've recorded a route with a GPS device or a fitness app, chances are it can be exported as a GPX file (opens new window). Hikes, bike rides, runs, and delivery routes can all be drawn onto a dynamic map.

The gpx method is part of the Universal API, so you can use it in any available language...

map.gpx(url, options);

Practically speaking, your code could look something like this...

// Create a plain dynamic map
const map = googleMaps.map();

// Add a GPX track to the map
map.gpx('/files/morning-hike.gpx', {'id': 'my-gpx'});

Tracks, routes, and waypoints will all appear on the map. Once the file has loaded, the map will zoom to show the entire layer (unless you set preserveViewport).

# The url parameter

The file is fetched by the visitor's browser, so relative and local URLs work just fine. However, a file hosted on another domain may not load. See Files on another domain...

# The options parameter

All options are optional.

Option Type Description
id string Reference point for each GPX layer.
preserveViewport bool If true, the map will not zoom to fit the layer once it loads.
suppressInfoWindows bool If true, clicking a track or waypoint will not open an info window.
clickable bool If false, the layer will ignore clicks entirely (and no info windows will open).
zIndex int Stacking order of the layer, relative to other layers.
style object Any google.maps.Data.StyleOptions (opens new window) properties.

# Styling the track

Most GPX files carry no styles of their own, so a track without one will be drawn as a blue line by default. To change how the line looks, use the style option...

map.gpx(url, {
    'style': {
        strokeColor: '#D9480F',
        strokeOpacity: 0.8,
        strokeWeight: 5
    }
});

In JavaScript, the style option can also be a styling function (opens new window), which receives each track or waypoint and returns its style.

Clicking a track or waypoint will open an info window showing its name and description (if it has them). To turn the info windows off, set suppressInfoWindows to true.

# Hiding or showing a GPX layer

To dynamically hide or show a GPX layer, use hideGpx and showGpx...

// Hide the GPX layer
map.hideGpx('my-gpx');

// Show the GPX layer
map.showGpx('my-gpx');

# Beyond hiding and showing

When you need to do more than hide or show a layer, you can get the raw Google Data layer object (opens new window), and manipulate it further using Google's own API.

This method is only available in JavaScript.

// Get the raw Google Data layer object
const gpx = map.getGpx('my-gpx');

← Ground Overlays →