I am trying to use the JS StreetView API to let the user select a view they wish to use for a static StreetView image. I've built a basic test as located on my sandbox instance (and below for future posterity).
When the page first loads, the StreetView view-port loads, and the static image reflecting that view-port loads correctly. If I pan around without my from my position, the static image updates correctly.
I'm using calls made on pov_changed, position_changed, and visible_changed events to invoke the updating of the static image. I put a half a second delay between the firing of these events to not invoke quota errors.
My problem is this: If I use any of the 'clickToGo' actions to change my location, the location (latitude/longitude) shown in my static StreetView does not correctly reflect the JS StreetView view-port. From what i can see, the pov (fov/zoom, heading, pitch) are all correct, but my location is not.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function initialize() {
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), {
position: new google.maps.LatLng(42.345573,-71.098326),
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
});
/**
* Build static URL from streetview JS instance settings
*/
function getStaticUrl(secure) {
secure = (secure) ? 's' : '';
var latlng = panorama.getPosition();
var pov = panorama.getPov();
var url = "http" + secure + "://maps.googleapis.com/maps/api/streetview?size=500x400&location=" + encodeURIComponent(latlng.lat() + ", " + latlng.lng()) + "&fov=" + (180 / Math.pow(2, pov.zoom)) + "&heading=" + encodeURI(pov.heading) + "&pitch=" + encodeURI(pov.pitch) + "&sensor=false";
console.log("lat: " + latlng.lat() + " " + "lng: " + latlng.lng());
console.log("img src: " + url);
return url;
}
/**
* To stop overusing quota errors with the static streetview API, wait half a second after streetview has stopped moving to
* update image preview.
*/
var _updateStreetViewWait = 0;
var _handleStreetViewPovChange = function() {
clearTimeout(_updateStreetViewWait);
_updateStreetViewWait = setTimeout(function() {
var linkUrl = getStaticUrl();
$('#link').html("<a target='_blank' href='" + linkUrl + "'><img src='" + linkUrl + "'/></a>");
}, 500);
};
google.maps.event.addListener(panorama, 'pov_changed', _handleStreetViewPovChange);
google.maps.event.addListener(panorama, 'position_changed', _handleStreetViewPovChange);
google.maps.event.addListener(panorama, 'visible_changed', _handleStreetViewPovChange);
}
</script>
</head>
<body onload="initialize()">
<div id="pano" style="width: 500px; height: 400px"></div>
<div id="link" style="width:100%; height: 2%"></div>
</body>
</html>
The two different APIs use different projection systems. The JS API uses different projections depending on the browser, so they're not going to line up