GPX Files and Google Maps

MattW

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.

PHP:
<!DOCTYPE html>
<html>
<head>
<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 }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
  function initialize() {
    var map = new google.maps.Map(document.getElementById("map_canvas"), {
      mapTypeId: google.maps.MapTypeId.TERRAIN
    });
   
    $.ajax({
    type: "GET",
        <?php
        if (isset($_GET['gpx'])) {
        $gpxfile = $_GET['gpx'];
        }
    echo "url: \"http://sheffieldfitnessforum.co.uk/attachments/$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);
        points.push(p);
        bounds.extend(p);
      });

      var poly = new google.maps.Polyline({
        // use your own style here
        path: points,
        strokeColor: "#954b60",
        strokeOpacity: .7,
        strokeWeight: 4
      });
     
      poly.setMap(map);
     
      // fit bounds to track
      map.fitBounds(bounds);
    }
    });
  }
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>

Create a custom Media Site BB Code

media_site.webp

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: http://sheffieldfitnessforum.co.uk/attachments/rk_gpx-_2012-05-20_1014-gpx.34/

and enter that as the Media URL
media_url.webp

media_url2.webp

This then embeds the iframe into a post
gpx_map.webp

Can anyone think of a better way of using the uploaded GPX file or getting the information earlier to use in the embedded URL?
 
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.
 
@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:
@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.
 
Top Bottom