Since Google introduced Maps in 2005, designers, artists, and creative coders have seen it as platform for creativity and invention. As creative technologists, we love finding new and interesting ways to use Maps in our work.
We were tasked to create a custom trailer that incorporates imagery from a viewer’s physical location. The imagery would be composited together to generate a video that resembled driving through Google Street View.
Hyperlapse.js, a library created by Teehan+Lax, lets you create stop motion animations using Google Street View—exactly what we needed. Since this library is experimental, we delved deeper into the code to ensure it was a valid solution.
Upon investigation, we found that the GSVPano.js library (a dependency of Hyperlapse.js) retrieves images from Street View that violate Google’s Terms of Service (GSVPano has since been removed due to a cease and desist). This library made use of an internal URL within Google’s panorama libraries; the same URLs you would see when inspecting the network tab of the developer tools while panning around in Street View.
In order to stay within the Terms of Service and also provide a Street View racing experience, we were going to have to roll out our own version of this library. We built a library that pulls from Google’s official Street View Image API. We then combined this public API with a Google Map route and HTML5 canvas. In addition to having an experience that was compliant with the Google ToS, our implementation used a fraction of the HTTP requests made by Hyperlapse.js’s GSVPano.js library.
Ultimately, we wrote the app to do the following:
- Gather all popular places near the viewer’s location in order to serve up a route that shows familiar places.
- Create a Google Maps route between two of these places.
- This is then passed to our library, StreetviewSequence, which steps through each of the waypoints provided by the Google Maps route.
- As it’s stepping through, it downloads Street View images along the path.
- Once all the images have been downloaded, our library draws then to an HTML canvas at an optimal frame rate based on the specified duration — you can have it cruise slowly or race at astronomical speeds.
[iframe src=”http://useallfive.github.io/StreetviewSequence.js/route-fullscreen.html” width=”100%” height=”375px”]