Accessing the target building using Google StreetView

Question

My question is very simple.

I need a heading value to know how to configure POV.

sv.getPanoramaByLocation() in this case returns a data variable containing the heading both arrows, in the direction of which you can go further.

However, this does not give me the meaning of heading , for which you can see the building. However, you can use a marker Street view for your building! example

Can anyone help me with this? I can do whatever I want.

Answer 1

Geocode the address of the building on which you want to "look." Use the computeHeading geometry library (from: LatLng, to: LatLng) to calculate the title between the StreetView location and the building.

(assumes the geocoder returns the geocode on the roof)

example (Statue of Liberty)

another option, use the guidance service:

related question: asking for the main road for StreetView panoramic panoramas instead of return paths from the API

code snippet that uses the route service to get the location on the road, to use for the location of the “camera” for street view (now it’s better to work when you can get the “internal” street view places):

 var map; var berkeley = new google.maps.LatLng(37.869085, -122.254775); var sv = new google.maps.StreetViewService(); var geocoder = new google.maps.Geocoder(); var directionsService = new google.maps.DirectionsService(); var panorama; var myLatLng; var address = "525 Beacon St. Boston, MA"; function initialize() { panorama = new google.maps.StreetViewPanorama(document.getElementById("pano")); directionsService.route({ origin: address, destination: address, travelMode: google.maps.TravelMode.DRIVING }, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { // myLatLng = response.routes[0].legs[0].start_location; sv.getPanoramaByLocation(response.routes[0].legs[0].start_location, 50, processSVData); var marker = new google.maps.Marker({ position: response.routes[0].legs[0].start_location, map: map, title: "Directions" }); map.setCenter(myLatLng); } else document.getElementById('info').innerHTML += "status:"+status+"<br>"; }); geocoder.geocode({ 'address': address }, geocoderCallback); // Set up the map var myOptions = { zoom: 15 }; map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); } google.maps.event.addDomListener(window, 'load', initialize); function processSVData(data, status) { if (status == google.maps.StreetViewStatus.OK) { panorama.setPano(data.location.pano); var camera = new google.maps.Marker({ position: data.location.latLng, map: map, draggable: true, title: "camera" }); var heading = google.maps.geometry.spherical.computeHeading(data.location.latLng, myLatLng); document.getElementById('info').innerHTML += "heading:"+heading+"<br>" + "location: "+myLatLng.toUrlValue(6)+"<br>" + "camera:"+data.location.latLng.toUrlValue(6)+"<br>"; // alert(data.location.latLng+":"+myLatLng+":"+heading); panorama.setPov({ heading: heading, pitch: 0, zoom: 1 }); panorama.setVisible(true); } else { alert("Street View data not found for this location."); } } function geocoderCallback(results, status) { if (status == google.maps.GeocoderStatus.OK) { myLatLng = results[0].geometry.location; map.setCenter(myLatLng); if (results[0].geometry.viewport) map.fitBounds(results[0].geometry.viewport); else if (results[0].geometry.bounds) map.fitBounds(results[0].geometry.bounds); else map.setZoom(15); var marker = new google.maps.Marker({ position: myLatLng, map: map, title: address }); } else { alert("Geocode was not successful for the following reason: " + status); } }; 

 html, body { height: 100%; margin: 0; padding: 0; } #map_canvas { height: 100%; } 

 <script src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script> <div id="pano" style="width: 425px; height: 400px;float:left"></div> <div id="info"></div> <div id="map_canvas" style="width: 425px; height: 400px;float:left"></div> <div id="map_center"></div> <div id="streetview_pov"></div>