Display Valid Google Streetview Areas as a Layer on a Map using Javascript API v3

Question

I'm working on a javascript web application that uses Google Maps Javascript API v3. One of the things the map lets users do is draw routes along streets. However, I want users to be able to draw routes along streets that have been street viewed, and I'm running into a bit of a problem...

When you drag the yellow streetview man over the map object, all the valid streetview streets light up in blue. However, sometimes these streets do not align properly with the actual map, and other times streets that are on the map haven't been street viewed. My question is how do I get that "valid streetview area" overlay to be on the map without dragging the yellow guy around? Is there a layer I can activate somehow?

I want this layer to be visible at all times so users can tell if the streets they're drawing routes along have been street viewed and to be able to make sure their routes line up with the street view grid.

Thanks

Answer 1

StreetViewCoverageLayer() has been added to v3 api so this is possible.

https://developers.google.com/maps/documentation/javascript/reference#StreetViewCoverageLayer

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var streetViewLayer = new google.maps.StreetViewCoverageLayer();
streetViewLayer.setMap(map);

Answer 2

In API v3 there is no layer that displays the blue overlay over the map. Here is the complete list of available layers: https://developers.google.com/maps/documentation/javascript/layers .

Currently, both in the API and on the official Maps site, that blue lines are actually transparent PNG tiles (256x256) that display over the map.

The reason why sometimes they don't align properly is because in some countries Map Maker is available (collaborative map editing), and people mess up with road lines, and they don't update in all Google services at the same time (for street view availability I don't even think they update at all).

The only workaround that I can see is to get acquainted to the Tile Coordinates system used in Google Maps ( https://developers.google.com/maps/documentation/javascript/maptypes#TileCoordinates ), that is also used for the blue overlay, and create a new Map Type / Layer that uses it.

Example of a tile link: https://mts2.google.com/mapslt?lyrs=svv&x=75041&y=47444&z=17&w=256&h=256&hl=en&style=40,18 .

x and y are tile coordinates and z is the zoom

It's a little complicated, but if you plan to do it, I could help with some additional resources.

But please NOTICE: this workaround is NOT covered by the API terms.