Klairvoyant infosolution's Blog

Display TCX tracks using Google Maps API

john

This is the modified code which I fetch from the site

http://www.jacquet80.eu/blog/post/2011/02/Display-GPX-tracks-using-Google-Maps-API

The whole code

<!DOCTYPE html>

<!–

Demo put together by Christophe Jacquet in February 2011.
http://www.jacquet80.eu >

Use it and adapt it at your own will.

–>

<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&gt;
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js”></script&gt;
<script type=”text/javascript”>
function initialize() {
var map = new google.maps.Map(document.getElementById(“map_canvas”), {
mapTypeId: google.maps.MapTypeId.TERRAIN
});

$.ajax({
type: “GET”,
url: “./history.tcx”, // change to your file
dataType: “xml”,
success: function(xml) {
var points = [];
var bounds = new google.maps.LatLngBounds ();
$(xml).find(“Position”).each(function() {
var lat=$(this).find(“LatitudeDegrees”).text();
var lon = $(this).find(“LongitudeDegrees”).text();
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: “#FF00AA”,
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>