Klairvoyant infosolution's Blog

Display TCX tracks using Google Maps API


This is the modified code which I fetch from the site


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.


<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=”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

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);

var poly = new google.maps.Polyline({
// use your own style here
path: points,
strokeColor: “#FF00AA”,
strokeOpacity: .7,
strokeWeight: 4


// fit bounds to track

<body onload=”initialize()”>
<div id=”map_canvas”></div>