Skip to content
jQuery plugin to show gpx track and altitude graph.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
libs/qunit
src
test
.jshintrc
Gruntfile.js
LICENSE
README.md
package.json
showgpxtracks.jquery.json

README.md

#jquery.showgpxtracks

jQuery plugin to show gpx track and altitude graph

##Download

##Usage

###Load from URL("src" attr)

<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&language=en&sensor=false"></script>

		<script src='jquery.showgpxtracks.js' ></script>

		<script>
			$(document).ready(function(){
				$('.track').showGpxTracks();
			});
		</script>
	</head>

	<body>
		<div class='track' src='hiking.gpx' style='width:600px;height;400px;'></div>
	</body>
</html>

The server which hosts gpx files have to support Access-Control-Allow-Origin header if the server is on another domain.

###Load from URL(function param)

<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&language=en&sensor=false"></script>

		<script src='jquery.showgpxtracks.js' ></script>

		<script>
			$(document).ready(function(){
				$('#track').showGpxTracks('hiking.gpx');
			});
		</script>
	</head>

	<body>
		<div id='track' style='width:600px;height;400px;'></div>
	</body>
</html>

###Load from GPX Text

<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&language=en&sensor=false"></script>

		<script src='jquery.showgpxtracks.js' ></script>

		<script>
			$(document).ready(function(){
				var gpx='<?xml version="1.0" encoding="UTF-8"?><gpx version="1.1" xmlns="http://www.topografix.com/GPX/1/1"><trk><trkseg><trkpt lat="35.365968055555555" lon="138.73368555555555"><ele>3680.0</ele></trkpt><trkpt lat="35.36499416666667" lon="138.73331305555556"><ele>3712.0</ele></trkpt><trkpt lat="35.36499416666667" lon="138.73331305555556"><ele>3712.0</ele></trkpt><trkpt lat="35.36493166666666" lon="138.73317333333333"><ele>3712.0</ele></trkpt></trkseg></trk></gpx>';
				$('#track').showGpxTracksString(gpx);
			});
		</script>
	</head>

	<body>
		<div id='track' style='width:600px;height;400px;'></div>
	</body>
</html>

##History

  • 0.2.0: Added showGpxTracksString() and optionalUrl param of showGpxTracks()
You can’t perform that action at this time.