title: Embed google photo sphere in website
body: <p>i'm using code to embed google maps streetview photo in website. I take the code from the guide:</p>
  
  <pre><code>function initialize() {
  panorama = new google.maps.StreetViewPanorama(
    document.getElementById('street-view'),
    {
      position: {lat: myLat, lng: myLng},
      pov: {heading: 165, pitch: 0},
      zoom: 1
    });
  }
  </code></pre>
  
  <p>In place of myLat and myLng i put latitude and longitude that i take from photo url. Now this work for all type of photo that i found (streetview photo, "see inside" photo) except one "PHOTO SPHERE", i found that there are two type of photo sphere <a href="http://i.stack.imgur.com/lIXcq.png" rel="nofollow">see here</a></p>
  
  <p>Now, google recently update google maps and i think that "PHOTO SPHERE" are the new one, and "photo sphere" the oldest, but if i put latitude and longitude of the second, the code works, with the new one it doesn't work, how can i fix?</p>
  
  <p>Example: if i take this url: <a href="http://www.google.com/maps/@0.5676777,37.527536,3a,75y,272.82h,93.02t/data=!3m5!1e1!3m3!1st4o4xj2l6HRAma2KT52brg!7i13312!8i6656" rel="nofollow">http://www.google.com/maps/@0.5676777,37.527536,3a,75y,272.82h,93.02t/data=!3m5!1e1!3m3!1st4o4xj2l6HRAma2KT52brg!7i13312!8i6656</a> with 0.5676777 as myLat and 37.527536 as myLng, the photo is displayed in the website</p>
  
  <p>if i take this: <a href="http://www.google.it/maps/@35.91208,14.498901,3a,89.9y,2.16h,87.34t/data=!3m8!1e1!3m6!1s-bkrM3HFU1vg%2FVhjysw39NSI%2FAAAAAAAAAPk%2F2PLOjiwhbh4!2e4!3e11!6s%2F%2Flh3.googleusercontent.com%2F-bkrM3HFU1vg%2FVhjysw39NSI%2FAAAAAAAAAPk%2F2PLOjiwhbh4%2Fw203-h101-n-k-no%2F!7i10000!8i5000" rel="nofollow">http://www.google.it/maps/@35.91208,14.498901,3a,89.9y,2.16h,87.34t/data=!3m8!1e1!3m6!1s-bkrM3HFU1vg%2FVhjysw39NSI%2FAAAAAAAAAPk%2F2PLOjiwhbh4!2e4!3e11!6s%2F%2Flh3.googleusercontent.com%2F-bkrM3HFU1vg%2FVhjysw39NSI%2FAAAAAAAAAPk%2F2PLOjiwhbh4%2Fw203-h101-n-k-no%2F!7i10000!8i5000</a></p>
  
  <p>35.91208: myLat, 14.498901: myLng</p>
  
  <p>The code not works and no photo is displayed
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Street View&lt;/title&gt;
      &lt;style&gt;
        html, body {
          height: 100%;
          margin: 0;
          padding: 0;
        }
        #street-view {
          height: 100%;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="street-view"&gt;&lt;/div&gt;
      &lt;script&gt;
  var panorama;
  function initialize() {
    panorama = new google.maps.StreetViewPanorama(
        document.getElementById('street-view'),
        {
          position: {lat: 35.91208, lng: 14.498901},
          pov: {heading: 165, pitch: 0},
          zoom: 1
        });
  }
  
      &lt;/script&gt;
      &lt;script async defer
           src="https://maps.googleapis.com/maps/api/js?signed_in=true&amp;callback=initialize"&gt;
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>