I am using the Street View Javascript Api in a project, and I understand how to use heading to make the Google's panorama aim north.
Now I am also getting all the tiles that create this panorama and using them to create a 360° raw panorama image.
However, I want to know if there is a way to find out automatically where the north is in the raw panorama created.
For example, 
2 Answers
Answers 1
Is there a direct solution?
As far as I know, Google Maps APIs and in special the panorama views do not have an interface that has arrows in the North and/or South of the image like you have in your post.
Such a solution would have to be manually coded by you into figuring it out.
Work-around
However, there is a workaround you can use, which makes use of the panorama view and that has a built-in compass in the interface. This way, when you move the image around, you always have a sense where North and South are.
Code and Docs
You can achieve this type of interface by using the following example (PS: replace the API key!):
<!DOCTYPE html> <html> <head> <title>Custom Street View panoramas</title> <meta charset="utf-8"> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="map"></div> <script> function initPano() { // Set up Street View and initially set it visible. Register the // custom panorama provider function. Set the StreetView to display // the custom panorama 'reception' which we check for below. var panorama = new google.maps.StreetViewPanorama( document.getElementById('map'), { pano: 'reception', visible: true, panoProvider: getCustomPanorama }); } // Return a pano image given the panoID. function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) { // Note: robust custom panorama methods would require tiled pano data. // Here we're just using a single tile, set to the tile size and equal // to the pano "world" size. return 'https://developers.google.com/maps/documentation/javascript/examples/full/images/panoReception1024-0.jpg'; } // Construct the appropriate StreetViewPanoramaData given // the passed pano IDs. function getCustomPanorama(pano, zoom, tileX, tileY) { if (pano === 'reception') { return { location: { pano: 'reception', description: 'Google Sydney - Reception' }, links: [], // The text for the copyright control. copyright: 'Imagery (c) 2010 Google', // The definition of the tiles for this panorama. tiles: { tileSize: new google.maps.Size(1024, 512), worldSize: new google.maps.Size(1024, 512), // The heading in degrees at the origin of the panorama // tile set. centerHeading: 105, getTileUrl: getCustomPanoramaTileUrl } }; } } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initPano"> </script> </body> </html> Which is available at the Custom Street View panoramas documentation page.
Answers 2
I managed to solve it in a way.
In my project I am using StreetViewService to get a Panorama from a pair Latitude-Longitude
sv = new google.maps.StreetViewService(); sv.getPanorama({location: latLng, radius: 50}, updateInfo) In the parameters for updateInfo (info, status) which are the response from sv.getPanorama i found:
info.tiles.centerHeading This is the car's direction heading.
Now, if the raw panorama is a 360° view, I can use cross multiplication to get the pixel in the horizontal where the North is and draw all cardinal points correctly.
This was more complicated than i would want, but at least is working now.
0 comments:
Post a Comment