- Prepare route points
- Prepare Google Maps API Key
- Add MapCountdown
- With module bundler
- In browser
yarn install map-countdown
npm install map-countdown
Prepare route points
To draw polygons on Google Maps we need to pass an array of route points. To do that we can import .tcx file and use
route-parser CLI to parse it.
- First ensure
map-countdownis installed. Next you have to download workout in .tcx format. The most popular sport tracking app are supported:
- After download open a terminal in your project's directory and run:
route-importer ~/Downloads/training-file.tcx routePoints.js
route-importer will parse TCX file and save it with given name.
Prepare Google Maps API Key
Google Maps need an api key for working. If you don't have a key already, don't worry. You can create new one below: https://developers.google.com/maps/documentation/embed/get-api-key Replace 'GOOGLE_API_KEY' from chosen snippet below with your api key.
With module bundler
selector: '#countdown'key: 'GOOGLE_API_KEY'meta: '2019-07-13 11:30:00'
You have to include routePoints.js along with MapCountdown, which load those points automatically. Next, add container for countdown (ie. #countdown).
You can use jQuery, if you will.