streetview setting heading and pitch

[msreekm]

how do i set heading and pitch values for streetmap? I tried passing them in Googlemap and streetviewpanorama as props, does not work? also tried

const defaultOptions = { mapTypeControl: false, zoomControl: true, streetViewControl: false, disableDefaultUI: true,

};

export const StreetViewPanormaWithAnOverlayView = compose( withProps(props => { return { googleMapURL: https://maps.googleapis.com/maps/api/js?key=${ googleApiKey }&v=3.exp&libraries=geometry,drawing,places, loadingElement: <div style={{ height: 100% }} />, containerElement: <div style={{ height: 100% }} />, mapElement: <div style={{ height: 100% }} />, center: { lat: props.lat, lng: props.lng, heading: props.heading, pitch: props.pitch }, <--- does not work either! }; }), withScriptjs, withGoogleMap )(props => ( <GoogleMap defaultZoom={8} defaultCenter={props.center} defaultOptions={defaultOptions}> <StreetViewPanorama defaultPosition={props.center} visible defaultOptions={{ enableCloseButton: false }}> </StreetViewPanorama> </GoogleMap> ));

[jzheng16]

Having the same issue.. tried multiple ways but can't figure it out. The doc says to pass them to GoogleMap as a prop but google documentation says to set it on the street view itself so I'm not too clear.

[aviramga]

hi were you able to solve this?

[KristofVDB1]

A bit late probably, but you need to define the heading and zoom as part of pov

 StreetViewPano = compose(
        withProps({
          loadingElement: <div style={{ height: '100%' }} />,
          googleMapURL: 'https://maps.googleapis.com/maps/api/js?key=key&v=3.exp&libraries=geometry,drawing,places',
          containerElement: <div style={{ height: '400px' }} />,
          mapElement: <div style={{ height: '400px' }} />,
          center: { lat: this.props.position.lat, lng: this.props.position.lng },
          pov: {
            heading: this.props.position.heading,
            pitch: this.props.position.pitch,
          },
          zoom: this.state.zoom,
        }),
        withScriptjs,
        withGoogleMap,
      )((props) => {
        return (
          <GoogleMap>
            <StreetViewPanorama
              defaultZoom={props.zoom}
              defaultPosition={props.center} 
              defaultPov={props.pov}
              onPovChanged={this.props.toggleVisibilityPostcard}
              visible
            />
          </GoogleMap>
        )
      });