I initially requested this on Super User but was told that it may be better placed here...

I've got a running blog and that helped me to track and talk about my runs I have lately purchased a Garmin Gps navigation watch. The setup works a goody and I am in a position to share links to my runs during my blog for example:


Can there be a good way that i can capture the map itself from the Garmin Connect site (begin to see the link) and display it during my blog posting? I'm able to have a screenshot but an interactive map could be heaps better. It's clearly a Google Map using the run info overlayed so there has to be a means... right?

To produced an embedded interactive Google Map to render your run polylines, you will have to extract the information the Garmin website is using to render the road.

In the Garmin site, you will find two Javascript files which do the job:

http://connect.garmin.com/resource/garmin-js-lib/map/MapsUtil.js - Couple of utility functions for rendering Google maps according to data within the Garmin system http://connect.garmin.com/api/activity/component/mapLoader.js - Uses Garmin.service.ActivityClient to seize the JSON data explaining the polyline. It feeds this data into Garmin.map.MapsUtil.addEncodedPolylineToMap to render the map.

So do that in your blog, you will have to either request the JSON data in the Garmin site (and trust the URI format does not change) or grab the information and store it by yourself site. The URI format is presently:

http://connect.garmin.com/proxy/activity-service-1.0/gpolyline/activity/<activity id>?full=true

Where activity ID may be the last number inside your original URL. So:


This data request will return some JSON that you could then use to render a Google Map.

After you have made the decision how you need to keep JSON data, you will have to write some Javascript to request the JSON and, within the callback, feed it in to the GPolyline.fromEncoded method. After you have a GPolyline object (that's populated in the encoded JSON data), you can include it to some Google Maps GMap2 using the addOverlay method.

I recognize this response is fairly technically involved and can be overwhelming should you haven't performed with Google Maps before. If this sounds like the situation, I would recommend heading to the Google Maps API intro page for many hints on getting began.

Because this question was initially published, Garmin Connect has since added a fast code snippet to embed inside your WordPress site to show your maps and course data. If you are getting issues obtaining the code snippet to remain in the publish after saving - take a look at these instructions for embedding Garmin Connect activities in WordPress.