Google Street View – Programmatically Enable or Disable Arrows Control

google-street-viewhtmljavascript

I'm building a web application using Google Street View andh HTML / Javascript.

I'd like to enable / disable the arrows controls that are on the images.

I can't show examples to do it …

Suggestions / examples?

Best Answer

I've solved in this way ... 

<html>
  <head>
    <meta charset="utf-8">
    <title>test Street View</title>

    <style>
      html, body {
        min-height: 100%;
        min-width: 100%;
        margin: 0;
        padding: 0;
      }
      table {
        width: 95vw;
        height: 95vh;
      }
      td {
        width: 50%;
        height: 50%;
      }
   </style>
  </head>
  <body>
    <div id="maps-images">
     <center>
      <table border=1>
       <!-- first row -->
       <tr id="row1">
         <td id="g_map">
           <div id="google_map" style="width:100%;height:100%"></div>
         </td>
         <td id="google-street-view">
           <div id="google-street-view_images" style="width:100%;height:100%"></div>
         </td>
       </tr>
      </table>
    </center>
    </div>

    <script>
      var panorama;

      function initialize() {
        //### The original pegman position ...
        var pegman_position = {lat: 42.628386111111126, lng: 13.291408333333237};
        var marker;

        //### Add Google Map ...
        var google_map = new google.maps.Map(document.getElementById('google_map'), {
          center: pegman_position,
          zoom: 16
        });

        //### Add Google Street View ...
        window.panorama = new google.maps.StreetViewPanorama(
          document.getElementById('google-street-view_images'), {
            position: pegman_position,
            pov: {
              heading: 34,
              pitch: 10
            }
          });
       google_map.setStreetView(window.panorama);

       //### Modify Street View controls ...
       var panoOptions = {
         scrollwheel: false,
         disableDefaultUI: true,
         clickToGo: false
       };
       window.panorama.setOptions(panoOptions);

      }
    </script>

    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=<PUT_YOUR_APIKEY_HERE&callback=initialize">
    </script>

  </body>
</html>

In this section I've configured the options ... 

       //### Modify Street View controls ...
       var panoOptions = {
         scrollwheel: false,
         disableDefaultUI: true,
         clickToGo: false
       };
       window.panorama.setOptions(panoOptions);

Now I'm able to manage how to enable / disable controls on Street View images ...

Related Question