Home/ Questions/Q 623075
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T19:03:12+00:00

I originally asked this question on Super User but was told that it might

  • 0

I originally asked this question on Super User but was told that it might be better placed here…

I have a running blog and to help me track and write about my runs I’ve recently bought a Garmin GPS watch. The setup works a treat and I’m able to share links to my runs in my blog such as:

http://connect.garmin.com/activity/23842182

Is there an easy way for me to capture the map itself out of the Garmin Connect site (see the link) and display it in my blog posting? I can take a screenshot but an interactive map would be heaps better. It’s obviously a Google Map with the run info overlayed so there must be a way… right?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    To created an embedded interactive Google Map to render your run polylines, you will need to extract the data that the Garmin site is using to render the line.

    From the Garmin site, there are two Javascript files that do the work:

    http://connect.garmin.com/resource/garmin-js-lib/map/MapsUtil.js – Bunch of utility functions for rendering Google maps based on data in the Garmin system
    http://connect.garmin.com/api/activity/component/mapLoader.js – Uses Garmin.service.ActivityClient to grab the JSON data describing the polyline. It feeds this data into Garmin.map.MapsUtil.addEncodedPolylineToMap to render the map.

    So do do this on your blog, you will need to either request the JSON data from the Garmin site (and trust that the URI format doesn’t change) or grab the data and store it on your own site. The URI format is currently:

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

    Where activity ID is the last number in your original URL. So:

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

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

    Once you have decided how you want to store the JSON data, you will need to write some Javascript to request the JSON and, in the callback, feed it into the GPolyline.fromEncoded method. Once you have a GPolyline object (that is populated from the encoded JSON data), you can add it to a Google Maps GMap2 with the addOverlay method.

    I realize that this answer is fairly technically involved and might be overwhelming if you haven’t played with Google Maps before. If this is the case, I suggest heading over to the Google Maps API intro page for some hints on getting started.

    • 0