This is an implementation using the HTML track element of a demo originally built by Jeff Faust. Thanks to Jeff for the idea and data!
This demo shows how the track element can be used to synchronise video playback with the position of a map marker, and make synchronised changes to DOM elements.
Click anywhere on the map to move the video and StreetView to the point in the journey closest to the clicked location. Move the video slider to change the StreetView panorama and the position of the marker on the map.
The position of the marker changes, corresponding to the current time of the video. Time of day is overlaid on the video.
A metadata track for the video on this page is built by parsing the original Google Maps track, which is in XML format:
<track name="track 0">
<p t="1331363000" a="37.4219276" b="-122.0882180"/>
<p t="1331363001" a="37.4219297" b="-122.0882154"/>
...
</track>
The text for each cue in the track is in JSON format. Each cue corresponds to a p element in the XML:
{"lat":37.4219276, "lng":-122.088218, "t":1331363000}
{"lat":37.4219297, "lng":-122.0882154, "t":1331363001}
...
The track cuechange event handler parses the cue JSON to set the position of the map marker.
For more information about the track element, take a look at Getting started with the track element on HTML5 Rocks.
For a 'bare-bones' example of the track element, see simpl.info/track.