GPX Files and Google Maps


Well-known member
So for my new forum, I'm wanting to be able to use a GPX file to plot a route on Google Maps.

I've done the code to read the GPX file in using ajax, and have been able to figure a way to use an uploaded GPX file in the XF attachments.

Create PHP file stored in own directory.

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Google Map with GPX track</title>
<style type="text/css">
  html, body, #map_canvas { width: 100%; height: 100%; margin: 0; padding: 0 }
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
  function initialize() {
    var map = new google.maps.Map(document.getElementById("map_canvas"), {
      mapTypeId: google.maps.MapTypeId.TERRAIN
    type: "GET",
        if (isset($_GET['gpx'])) {
        $gpxfile = $_GET['gpx'];
    echo "url: \"$gpxfile/\",";
    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);

      var poly = new google.maps.Polyline({
        // use your own style here
        path: points,
        strokeColor: "#954b60",
        strokeOpacity: .7,
        strokeWeight: 4
      // fit bounds to track
<body onload="initialize()">
  <div id="map_canvas"></div>
Create a custom Media Site BB Code


Now this is where it's a little messy, and I can't currently think of a better way of doing it.

You need to upload the GPX file into the post. Once this is uploaded, you take the URL of the attachment, eg:

and enter that as the Media URL


This then embeds the iframe into a post

Can anyone think of a better way of using the uploaded GPX file or getting the information earlier to use in the embedded URL?


Well-known member
VERY interesting, and I like your implementation. Seems easier than gettign teh user to upload the GPX to Google Maps and then get the map link and link to that within the forum post.


Well-known member
@MattW, are you still using this? Wonder if it's been developed any further?
I tried implementing, but the iframe embed map won't display inside the post instead just giving a grey background for the height and width (500 x 500)
Last edited:


Well-known member
@Mouth - no, I've not used this since. Most people use Garmin Connect or Strava, so I've got Media Codes for embedding their output instead.