0

I am trying to load a google streetview with the correct POV Heading.

Here is the code I am trying to replicate: https://stackoverflow.com/a/8381895/1093827

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Directly accessing Street View data</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>

var $this = $(this),
  _lat = $this.data(43.6771085),
  _lng = $this.data(-79.2759397),
  streetViewMaxDistance = 100;          

var point = new google.maps.LatLng(_lat,_lng);
var streetViewService = new google.maps.StreetViewService();
var panorama = spaces.map.map.getStreetView();

function initialize() {


// We get the map's default panorama and set up some defaults.
    // Note that we don't yet set it visible.


//panorama = spaces.map.map.getStreetView();

streetViewService.getPanoramaByLocation(point, streetViewMaxDistance, function (streetViewPanoramaData, status) {

    if(status === google.maps.StreetViewStatus.OK){

      var oldPoint = point;
          point = streetViewPanoramaData.location.latLng;

        var heading = google.maps.geometry.spherical.computeHeading(point,oldPoint);            

        panorama.setPosition(point);
        panorama.setPov({
           heading: heading,
            zoom: 1,
            pitch: 0
        });
        panorama.setVisible(true);

    }else{
      $this.text("Sorry! Street View is not available.");
        // no street view available in this range, or some error occurred
    }
});
 }

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas" style="width: 100%; height: 100%;float:left"></div>
  </body>
</html>

Is there something obviously wrong with my code? I cannot seem to get the page to load properly. Your help with this would be greatly appreciated.

Community
  • 1
  • 1
DoubleA
  • 736
  • 1
  • 7
  • 23
  • Take a look at this http://jsfiddle.net/kNS2L/6/ – DanielAttard Jul 07 '14 at 17:54
  • What is this `var panorama = spaces.map.map.getStreetView();` supposed to do? It gives me a javascript error: `Uncaught ReferenceError: spaces is not defined ` – geocodezip Jul 07 '14 at 17:57
  • [Fiddle based off duplicate and your lat/lng](http://jsfiddle.net/BT3RL/) – geocodezip Jul 07 '14 at 18:31
  • Thank you for getting the fiddle to work for me. I notice that the resulting street view is pointing towards the middle of the road. I'm trying to have the POV directed towards the target/house. I also noted that you added a DIV to display the heading. Do I need to use this heading to calculate the POV? – DoubleA Jul 07 '14 at 19:20

0 Answers0