Use All Five Squiggle Graphic

Adding Markers to Google Maps Street View

One of the core features of our Hangouts app, Treasure Hunt, is the ability to add markers to Google Maps Street View module. Check it out!

We realized early on that this was going to be a large amount of work, since the Street View panorama API does not provide this custom marker ability. However, inspired by the Google Art Project, we went back to it as a reference and found that it used a custom set of data, objects, and calculations to provide the custom marker ability.

We only needed a piece of their implementation, but we also needed to tailor it for our needs. So we jumped into their code to soak it all in. And a special thanks to them for the amazing amount of work that was done. We’d like to share some notes from our reverse engineering. If you want the nitty gritty feel free to message us.

— Markers (referred to as `Annotation`) are wrappers around simple dom elements whose position and size are updated when the viewer’s angle or position changes.
— To calculate position and size, a series of calculations are used to get relative distance and bearing. We’ve treated the calculations as mostly a black box. Basically, size is inversely related to distance, and position gets converted from the relative yaw and pitch to absolute x and y values via `StreetviewPanorama::getScreenPoint`.
— Only the markers in the current room are visible. Markers are filtered by checking their position with the the points in each room through a floorplan object sitting on top of a pair of remote floorplan datasets.
— Markers are also only visible if they are within distance and angle requirements relative to the viewer.
— Distance is found and checked with the positions of the marker and the viewer partly via the Pythagoras theorem. Angle is checked through the relative position’s yaw value, derived from bearing calculations over the positions.
— Markers are created with predefined data. In our case, this is not available.
— Also, further relative distance checking is done with ‘depth maps’, which are a bunch of calculations sitting on top of remote ‘binary’ datasets, indexed by the panorama’s position/id. Since we decided to include data locally, we felt it would have been too much work to port to our app.

If you have experience or knowledge of the StreetviewPanorama API please chime in below in the comments section or email us, we would love to hear your thoughts and feedback.


Jason Farrell is the CTO/Co-founder of Use All Five.
Follow Jason on Twitter

Get new perspectives and the latest information delivered to your inbox: