Search code examples
javascripthtmlgoogle-street-view

How to programmatically enable / disable arrows control in Google Street View?


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?


Solution

  • 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 ...