Menu
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, 
484
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.
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.
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.
77
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.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With