Geek Answers Handbook

Using google street view with marker, how can I point POV to the marker?

I have a simple street view that shows me a street view with the address:

var geocoder = new google.maps.Geocoder(); var address = "344 Laguna Dr, Milpitas, CA 95035"; geocoder.geocode( { 'address': address}, function(results, status) { //alert (results); if (status == google.maps.GeocoderStatus.OK) { //alert(results[0].geometry.location); myStreetView = new google.maps.StreetViewPanorama(document.getElementById("map_canvas")); myStreetView.setPosition(results[0].geometry.location); var marker = new google.maps.Marker({ position: results[0].geometry.location, map: myStreetView, title:address }); //alert ("yay"); } else { alert("Geocode was not successful for the following reason: " + status); } });

As you can see, I am adding a street marker to the street view. My question is that the street view points to the north, and the marker points to the south. For a non-specific address, how can I indicate that the street view should point to a marker for the address instead of specifying the default north?

+6
source share
3 answers

The reason for this is that POV overlooking the street is by default the direction the truck was in when the image was taken (figure). You need to find the location of the truck and the location of the house and calculate the “heading” from first to second , and then set the location of the street view in relation to the truck with the course you specified

 // adrloc=target address // svwloc=street-view truck location svwService.getPanoramaByLocation(adrloc,svwdst,function(dta,sts) { if(sts==google.maps.StreetViewStatus.OK) { var svwloc=dta.location.latLng; var svwhdg=google.maps.geometry.spherical.computeHeading(svwloc,adrloc); var svwmap=avwMap.getStreetView(); svwmap.setPosition(svwloc); svwmap.setPov({ heading: svwhdg, pitch: 0 }); svwMarker=new google.maps.Marker({ map:svwmap, position: adrloc }); svwmap.setVisible(true); } else { ... }

Another street view trick / trap is that you need to get the closest street view to the address place, repeatedly calling getPanoramaByLocation with increasing distance until you succeed or reach the maximum distance. I solve this with this code:

 var SVW_MAX=100; // maximum street-view distance in meters var SVW_INC=10; // increment street-view distance in meters var svwService=new google.maps.StreetViewService(); // street view service var svwMarker=null; // street view marker // NOTE: avwMap is the aerial view map, code not shown ... resolveStreetView(avwMap.getCenter(),SVW_INC); ... var resolveStreetView=function(adrloc,svwdst) { svwService.getPanoramaByLocation(adrloc,svwdst,function(dta,sts) { if(sts==google.maps.StreetViewStatus.OK) { var svwloc=dta.location.latLng; var svwhdg=google.maps.geometry.spherical.computeHeading(svwloc,adrloc); var svwmap=avwMap.getStreetView(); svwmap.setPosition(svwloc); svwmap.setPov({ heading: svwhdg, pitch: 0 }); svwMarker=new google.maps.Marker({ map:svwmap, position: adrloc }); svwmap.setVisible(true); } else if(svwdst<SVW_MAX) { resolveStreetView(adrloc,svwdst+SVW_INC); } }); }
+4
source

Check this example . Although for V2 you can reuse the code. Basically, you need to call computeAngle (markerLatLng, streetviewPanoLatLng) and set the Street View panorama panorama for the return value.

 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; }
+3
source

A simple example is based on your code:

  • find a place to search (using geocoder)
  • find the location of StreetViewPanorama (using the getLocation () method when its status has changed, an alternative would be to use the results of the getPosition () method).
  • use the computeHeading method of the geometry library to calculate the title from the camera at the address.
  • set this header using the setPov () method.
  • so that the marker gets to the right place (deleting this leaves the marker in the upper left corner). Not required unless markers are used.
 function geocodeAddress() { var address = "344 Laguna Dr, Milpitas, CA 95035"; geocoder.geocode({ 'address': address }, function(results, status) { //alert (results); if (status == google.maps.GeocoderStatus.OK) { //alert(results[0].geometry.location); myStreetView = new google.maps.StreetViewPanorama(document.getElementById("map_canvas")); myStreetView.setPosition(results[0].geometry.location); google.maps.event.addListenerOnce(myStreetView, 'status_changed', function() { var heading = google.maps.geometry.spherical.computeHeading(myStreetView.getLocation().latLng, results[0].geometry.location); myStreetView.setPov({ heading: heading, pitch: 0 }); setTimeout(function() { marker = new google.maps.Marker({ position: results[0].geometry.location, map: myStreetView, title: address }); if (marker && marker.setMap) marker.setMap(myStreetView); }, 500); }); } else { alert("Geocode was not successful for the following reason: " + status); } }); google.maps.event.addDomListener(document.getElementById('geoBtn'), 'click', geocodeAddress); }

working violin

snippet of working code:

 var geocoder = new google.maps.Geocoder(); var myStreetView = null; var marker = null; function geocodeAddress() { // var address = "344 Laguna Dr, Milpitas, CA 95035"; var address = document.getElementById('address').value; geocoder.geocode({ 'address': address }, function(results, status) { //alert (results); if (status == google.maps.GeocoderStatus.OK) { //alert(results[0].geometry.location); myStreetView = new google.maps.StreetViewPanorama(document.getElementById("map_canvas")); myStreetView.setPosition(results[0].geometry.location); google.maps.event.addListenerOnce(myStreetView, 'status_changed', function() { var heading = google.maps.geometry.spherical.computeHeading(myStreetView.getLocation().latLng, results[0].geometry.location); myStreetView.setPov({ heading: heading, pitch: 0 }); setTimeout(function() { marker = new google.maps.Marker({ position: results[0].geometry.location, map: myStreetView, title: address }); if (marker && marker.setMap) marker.setMap(myStreetView); }, 500); }); } else { alert("Geocode was not successful for the following reason: " + status); } }); google.maps.event.addDomListener(document.getElementById('geoBtn'), 'click', geocodeAddress); } google.maps.event.addDomListener(window, 'load', geocodeAddress); 
 html, body, #map_canvas { height: 100%; width: 100%; } 
 <script src="http://maps.google.com/maps/api/js?libraries=geometry"></script> <input id="address" type="text" value="344 Laguna Dr, Milpitas, CA 95035" /> <input id="geoBtn" type="button" value="Go" /> <div id="map_canvas"></div>
+2
source

More articles:


All Articles