Maps Platform
Product updates, customer stories, and tips and tricks on Google Maps Platform
Runner’s World app relives record-breaking global run
dinsdag 28 april 2015
Posted by Robert James Reese, Executive Producer for Runner’s World Online
Editor’s note:
Today’s guest blogger is Robert James Reese, executive producer for Runner's World Online. Read how Runner’s World’s
40 Million Steps
website used
Google Maps APIs
to build a virtual tour of an around-the-world run.
The journey of one runner's trek around the globe is an amazing feat, and at
Runner’s World
we wanted people to share in the experience. To do this, we created the
40 Million Steps
website, which allows people to relive Tom Denniss’ record-breaking, 622-day, world-spanning run.
The site uses
Google Maps APIs
to allow people to relive Denniss’ 16,300-mile run. Using Satellite View, users can click on the map to see the thousands of photos and nearly 400 videos captured during Denniss’ journey, making it feel as if they were there.
Our online launch coincided with a feature we ran in our
April 2015
print issue, so we wanted the online version to have some of the same look and feel to create a cohesive connection between print and online. The styling for the map itself is all specified through the styles property of the
MapOptions
object in our JavaScript.
Users view Day 1 of the run and are able to click through his progress.
We used the
Geocoding API
and the
Elevation API
as editorial tools. The Geocoding API helped us to fact-check location names, and we used the Elevation API to find out and highlight interesting facts about the run, such as its lowest and highest points.
The
Javascript API
was key in building the site. We faced a real challenge because of the amount of data we had from the run, on which Denniss wore a GPS-enabled watch to record his locations. Typically, when creating a polyline with the Google Maps API, we would have just included a "new google.maps.LatLng" on a separate line for each point, as shown in the documentation on
Google’s developer site.
However, since we were dealing with over 3 million GPS data points, it was too many for the browser to handle, so we simplified the polyline before sending the points to the browser by sampling every 20th data point.
We set out to build the site to impress our audience and give them something really cool that they hadn’t seen before. There’s arguably no better way to experience the joy, pain, exhaustion and exhilaration that Denniss felt during his run around the world—and Google Maps APIs were key to bringing his adventure to life.
Labels
5 Great Maps
ads
advertising
africa
Andorra
Android
App Engine
art
Australia
Autocomplete
Boston
brazil
Bruce Springsteen
Bulgaria
Campus Map
Chrome
City 24/7
Code for America
COM API
Computerlogy
creative advertising campaigns
Custom Map Types
design
developer
Developer Challenge
Developer stories
Directions API
Drawing Tools
Driving Directions
Earth
Earth API
Elevation API
environment
epungo
Estonia
Europe
Fab Friday
flash
Fusion Tables
GAE
games
GDAL
Gears
geo
Geodesic Lines
Germany
Gibraltar
GIS
Global Economy
gme
Google Analytics
Google App Engine
Google Earth
Google Earth API
Google I/O
Google Maps
Google Maps API
Google Maps Engine
Google Places API
Google Places API Developer Challenge
Google Street View API
government
Hackathon
Hamburg
heat map
heatmap
hiking
Hungary
iOS
JavaScript
jQuery
kenya
KML
Latitude API
Latvia
launch
Lithuania
local search
London
Mac
Map of the Week
maps
Maps API
Maps API for Flash
Maps Data API
Maps Zen
Marker Clusterer
Marketing
Mars
meetup
mobile
moca
modern art
More Than a Map
Morethanamap
Movies
Neighborhoods
New York City
Office Hours
Olympics
Panoramio
photos
Place Summaries
Places API
Plus
polygons
Premier
public transit
public transit layer
Python
real estate
rock
sao paulo
screencast
SketchUp
Slovakia
Slovenia
South Africa
Spain
Spatial Data Files
Static Maps API
street view
Styled Maps
Sydney
Track
traffic layer
Transportation
Tripline
Twitter
UN
United Nations
V3
Vancouver Olympics
visualizations
Volkswagen
VW
web
youtube
Archive
2018
nov
jul
jun
mei
mrt
feb
2017
nov
jun
mei
apr
mrt
feb
jan
2016
dec
nov
okt
sep
aug
jul
jun
mei
apr
feb
2015
dec
nov
okt
sep
aug
jul
jun
mei
apr
mrt
feb
jan
2014
dec
nov
okt
sep
aug
jul
jun
mei
apr
mrt
feb
2013
dec
nov
okt
sep
aug
jul
jun
mei
apr
mrt
feb
jan
2012
dec
nov
okt
sep
aug
jul
jun
mei
apr
mrt
feb
jan
2011
dec
nov
okt
sep
aug
jul
mei
apr
mrt
feb
jan
2010
dec
nov
okt
sep
aug
jul
jun
mei
apr
mrt
feb
jan
2009
dec
nov
okt
sep
aug
jul
jun
mei
apr
mrt
feb
jan
2008
dec
nov
okt
sep
aug
jul
jun
mei
Feed
Follow @GMapsPlatform
Follow
Google Maps Platform Website
Give us feedback in our
Product Forums
.
Follow