Gpx On Google Maps

Using QGIS version 3.4.3-Madeira. A polygon can’t be exported as GPX so it needs to be converted to a track to be exported.

Select the boundary layer (left click)
Edit > Select > Select Feature(s)
Click on the polygon
Vector > Geometry Tools > Polygons to Lines
- Selected features only (ticked)
- Run
- Close
Right click the new line layer
Export > Save Features As…
- File name C:\whereever\the\project\is\boundary.gpx
- CRS EPSG:4326 - WGS 84
- Add saved file to map (un ticked)
- GPX_USE_EXTENSIONS YES
- FORCE_GPX_TRACK YES

The resulting file should look like this.

<?xml version="1.0"?>
<gpx version="1.1" creator="GDAL 2.4.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:ogr="http://osgeo.org/gdal" xmlns="http://www.topografix.com/GPX/1/1" xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd">
<metadata><bounds minlat="51.501797864590380" minlon="-0.190822140209704" maxlat="51.513105188561454" maxlon="-0.151460481640611"/></metadata>                  
<trk>
  <extensions>
  </extensions>
  <trkseg>
    <trkpt lat="51.509807508937385" lon="-0.190822140209704">
    </trkpt>
    <trkpt lat="51.502975841767309" lon="-0.187415842833532">
    </trkpt>
    <trkpt lat="51.50179786459038" lon="-0.17776466693438">
    </trkpt>
    <trkpt lat="51.503211433548742" lon="-0.151460481640611">
    </trkpt>
    <trkpt lat="51.513105188561454" lon="-0.159030031365437">
    </trkpt>
    <trkpt lat="51.510278620641373" lon="-0.179278576879345">
    </trkpt>
    <trkpt lat="51.509807508937385" lon="-0.190822140209704">
    </trkpt>
  </trkseg>
</trk>
</gpx>

This GPX file can be shown on a Google Map like this.

function initMap() {
    var hydePark = new google.maps.LatLng(51.505164646, -0.158166034);
    var mapOptions = {
        center: hydePark,
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);
    $.ajax({
        type: "GET",
        url: "https://raw.githubusercontent.com/joejcollins/joejcollins.github.io/master/_posts/gpx-on-google-maps/01-hyde-park.gpx",
        dataType: "xml",
        success: function (xml) {
            var points = [];
            var bounds = new google.maps.LatLngBounds();
            $(xml).find("trkpt").each(function () {
                    var lat = $(this).attr("lat");
                    var lon = $(this).attr("lon");
                    var p = new google.maps.LatLng(lat, lon);
                    points.push(p);
                    bounds.extend(p);
            });
            var poly = new google.maps.Polyline({
                    path: points,
                    strokeColor: "#FF00AA",
                    strokeOpacity: .7,
                    strokeWeight: 4
            });
            poly.setMap(map);
            map.fitBounds(bounds);
        }
    });
}

Producing this map.

Written on January 26, 2019