Everyone loves the streetview service that Google maps provides. Naturally the Google API provides the ability to embed streetview within a web application if you feed it the right data and co-ordinates.
What it doesn’t do naturally and easily is automatically point the streetview camera an address.
This is something that I thought would be simple but was actually more difficult than it sounds.
Although it is fairly simple to create a streetview panorama at a given GPS point, what is more complicated is to ensure that the streetview camera is pointing in the correct direction (point of view, or yaw).
Here is the script I wrote (based on some other things i’ve found in various places) to calculate the direction / yaw / point of view of the panorama so that it always points in the correct direction when you give it some co-ordinates.
This assumes you have 2 divs:
<div id="map_canvas"></div>
<div id="pano"></div>
And that you are using the Google Maps API V3
You can then simply pass a text address to:
load_map_and_street_view_from_address('25 some rd, someville, Some Country');
Script below:
function load_map_and_street_view_from_address(address) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var gps = results[0].geometry.location;
create_map_and_streetview(gps.lat(), gps.lng(), 'map_canvas', 'pano');
}
});
}
var map;
var myPano;
var panorama;
var houseMarker;
var addLatLng;
var panoOptions;
function create_map_and_streetview(lat, lng, map_id, street_view_id) {
var googlePos = new google.maps.LatLng(lat,lng);
panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"));
addLatLng = new google.maps.LatLng(lat,lng);
var service = new google.maps.StreetViewService();
service.getPanoramaByLocation(addLatLng, 50, showPanoData);
var myOptions = {
zoom: 14,
center: addLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
backgroundColor: 'transparent',
streetViewControl: false,
keyboardShortcuts: false,
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
map: map,
position: addLatLng
});
}
function showPanoData(panoData, status) {
if (status != google.maps.StreetViewStatus.OK) {
$('#pano').html('No StreetView Picture Available').attr('style', 'text-align:center;font-weight:bold').show();
return;
}
$('#pano').show();
var angle = computeAngle(addLatLng, panoData.location.latLng);
var panoOptions = {
position: addLatLng,
addressControl: false,
linksControl: false,
panControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
pov: {
heading: angle,
pitch: 10,
zoom: 1
},
enableCloseButton: false,
visible:true
};
panorama.setOptions(panoOptions);
}
function computeAngle(endLatLng, startLatLng) {
var DEGREE_PER_RADIAN = 57.2957795;
var RADIAN_PER_DEGREE = 0.017453;
var dlat = endLatLng.lat() - startLatLng.lat();
var dlng = endLatLng.lng() - startLatLng.lng();
// We multiply dlng with cos(endLat), since the two points are very closeby,
// so we assume their cos values are approximately equal.
var yaw = Math.atan2(dlng * Math.cos(endLatLng.lat() * RADIAN_PER_DEGREE), dlat)
* DEGREE_PER_RADIAN;
return wrapAngle(yaw);
}
function wrapAngle(angle) {
if (angle >= 360) {
angle -= 360;
} else if (angle < 0) {
angle += 360;
}
return angle;
};
Note: some of this syntax uses Jquery, but it should be fairly easily ported to other frameworks or straight JS.
