PositionedStreetView.jsx 714 B

123456789101112131415161718192021222324252627
  1. import React, { useRef, useEffect } from "react";
  2. /* global google */
  3. export default React.memo(({ position }) => {
  4. const panoDivRef = useRef(null);
  5. const buttonRef = useRef(null);
  6. useEffect(() => {
  7. const pano = new google.maps.StreetViewPanorama(panoDivRef.current, {
  8. position,
  9. addressControl: false,
  10. showRoadLabels: false,
  11. clickToGo: true,
  12. visible: true,
  13. });
  14. buttonRef.current.onclick = () => pano.setPosition(position);
  15. });
  16. return (
  17. <div className="streetview-pane">
  18. <div className="streetview-pane__pano-div" ref={panoDivRef}/>
  19. <div className="streetview-pane__reset-button" ref={buttonRef}>
  20. Reset
  21. </div>
  22. </div>
  23. );
  24. });