Display valid Google Streetview areas as a layer on the map using the Javascript v3 API

Question

I am working on a javascript web application that uses the Google Javascript API 3. One of the things the map allows users to do is draw routes along the streets. However, I want users to be able to draw routes along the streets viewed by the streets, and I am facing a problem ...

When you drag a yellow street person over the map object, all the current street light streets turn blue. However, sometimes these streets are not properly aligned with the real map, and other streets that are on the map are not visible by the streets. My question is, how do I get that the “valid street space viewing area” will be on the map without dragging the yellow guy around? Is there any layer that I can activate?

I want this layer to be always visible so that users can find out if the streets they are drawing the routes on are viewed and the street is being viewed, and to make sure their routes match the street view grid.

thanks

Answer 1

StreetViewCoverageLayer () has been added to the 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

There is no layer in API v3 that displays a blue label above the map. Below is a complete list of the available layers: https://developers.google.com/maps/documentation/javascript/layers .

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

The reason that sometimes they do not align properly is because Map Maker is available in some countries (co-editing the map), and people messed up road lines and they are not updated in all Google services at the same time (for street accessibility, I don’t even I think that they are generally updated).

The only workaround that I see is to get acquainted with the tile coordinate system used in Google Maps ( https://developers.google.com/maps/documentation/javascript/maptypes#TileCoordinates ), i.e. it is also used for blue overlay and creates a new map type / layer that uses it.

Example link to a fragment: 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 the coordinates of the tile, and z is the increase

This is a bit complicated, but if you plan to do it, I can help with some additional resources.

But please PLEASE NOTE: this workaround is NOT covered by the API.