Display GPX tracks using Google Maps API
Le mercredi 16 février 2011 à 23:29 - Lien permanent
Surprinsingly, the Google Maps Javascript API does not provide a built-in way to create an overlay from a GPX track, contrary to OpenLayers for instance.
Forum messages asking a way to add GPX overlays to Google Maps are numerous, and various solutions are proposed. Here I propose my own method, adapted to the Google Maps Javascript API v3. It relies on jQuery, so it is very simple.
The following snippet assumes that a map has been created, and is referenced by the map
variable (of type google.maps.Map
). After the track has been added to the map, the last instruction zooms to fit the track.
$.ajax({ type: "GET", url: "URL to the GPX file", 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: "#FF00AA", strokeOpacity: .7, strokeWeight: 4 }); poly.setMap(map); // fit bounds to track map.fitBounds(bounds); } });
The code works as follows. Retrieve the GPX file using an XMLHttpRequest (“AJAX” request). jQuery parses the file and provides very easy access to the XML tree. For each trkpt
(“track point”) node, create a new Google Maps point at the given location. Finally, create a polyline from all these points, and add it to the map.
EDIT 2011-03-07: changed Polygon
to Polyline
because not all GPX tracks represent closed paths!
EDIT 2011-04-20: using “short” colors (#F0A
instead of #FF00AA
) no longer appears to work, so I adapted the code.
Commentaires
Seems that above code aint working anymore. Do you got an idea why not ?
Seems that above code now only works in Internet Explorer
“Short” color codes no longer work; I changed the code accordingly.
Hello,
I am working with my private WEB site specified before since many years starting from basic html and php featues. My current project is to present a walk here in the neighbourhood, based on the collected information on a gpx-file (from my mobile telephone SAMSUNG Wave II). A main issue is to present information stored on my WEB site at selectable waypoints. Most of the problems I could solve by internet browsing support in an earlier project to show the visitors of my WEB site with the use of google maps. Unfortunately up to now I did not yet find a solution to insert a gpx file in a google maps application. This evening I found your developments and my feeling is that here a solution for my problem is possible. Unfortunaly I did not succeed to reproduce your results in the sense that I obtain geographic pictures. Very probably I am missing some important things. The only change I tried was to include my google maps private code.
I strongly appreciate your comments on my problem.
Best greetings,
C. Broeders
Hi,
I try your "Live Example" by replacing the url with :
url: "http://mysite.com/gpx/mytrack.gpx"
and I have a blank ( grey in fact ) page.
help please.
Hi ChrisJ,
I'm running on the same problem as the message above !
I'm trying to run this example on my personal website and the only thing i get is the grey page.
Do u have idea on the issue to this problem?
Thanks in advance
Thank a lot : It Works !
I have one question :
Is it possible to add a tag with informations in the gpx file (i.e. the <name> attribut ?)
Best Regards,
Gilles
@tiblam, @funkyG: the same-origin policy prevents the browser from retrieving a from another domain through an AJAX call. Maybe you're running into this problem. See Same-origin policy on Wikipedia.
@gilles: yes, if you have other contents in your GPX file you can easily read it using jQuery. For instance:
$(xml).find("name")
.A very useful code snippet, thanks.
First time I did have a problem using the demo code on my domain (and with the gpx file on my domain), I got a gmap but it was just blue. Zooming out I found I was in the sea somewhere near Australia (should have been UK).
This was because in the GPX file (output by MemoryMap software) a latitude/longitude pair was identified in the gpx file as rtept rather than trkpt.
On further investigation that's because I'd saved as a route rather than a track.
Saved as a track the page works OK but also changing the code to look for rtept rather than trkpt works.
Interesting parsing - works using your demo, unfortunately it does some strange things with my gpx.
See here - www.tiredofit.ca/gmaps.html vs the front page of the website www.tiredofit.ca the map) - I have multiple tracks inside of my gpx and it seems to draw a solid line connecting all the tracks into one. Is there a way to split it up so that it appears properly on the front of my website, or how it would look if you put the gpx (http://www.tiredofit.ca/wp-content/..." into google maps website itself?
Hi there, nice stuff. It worked pretty good, even with my own GPX files. I've got one question for you: is there a way to add a START / END icon on the overlay, to show where the track starts... and where it ends? Cheers!
Loque: sure, just use
$(xml).find("trkpt").first()
and$(xml).find("trkpt").last()
to get the first/last point of the track and add the marker.Merci pour ce script qui fonctionne à merveille.
Un petit problème tout de même dont je viens de me rendre compte après plusieurs mois et que j'aimerais bien comprendre:
A chaque fois que le script est sollicité il en résulte un warning "not well-formed" dans la console de FireFox (version 42.0):
Pourtant le GPX me semble "bien formé":
<?xml version="1.0"?>
<gpx xmlns="http://www.topografix.com/GPX/1/1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-in..." xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/g..." version="1.1" creator="SkiTour">
....etc......etc.....................
Aucun warning dans Chrome.
En tout cas la trace est correctement affichée