1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

GPX Files and Google Maps

Discussion in 'XenForo Development Discussions' started by MattW, Jul 12, 2013.

  1. MattW

    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.PNG

    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.PNG

    media_url2.PNG

    This then embeds the iframe into a post
    gpx_map.PNG

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

    localhost8080 Well-Known Member

    would be nice if the map would be shown as the user uploaded the attachment without reposting it as media file :)
     
    MattW likes this.
  3. Mouth

    Mouth 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.
     
  4. Mouth

    Mouth 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: Jul 12, 2015
  5. MattW

    MattW 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.
     
    Mouth likes this.
  6. Mouth

    Mouth Well-Known Member

    Hmmm, I was wondering that.
    Could you share how you've setup the media codes?
     
  7. MattW

    MattW Well-Known Member

    Sure, it's in here : Strava
     
    Mouth likes this.
  8. AndyB

    AndyB Well-Known Member

Share This Page