BluechipJ

How to generate the embed code for a Google Photo Sphere

Jun 1st, 2016
116
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.36 KB | None | 0 0
  1. If your Photo Sphere is visible on Google Maps (blue dot), you can use this tool to generate the embed code automatically: http://suddenlink.net/popenoe/tools/embedding-tool.htm
  2.  
  3. If your tour is not not on Maps but you have the URL, you need to manually extract 4 pieces of information from the URL to generate your Google Maps iframe embed code.
  4. Sample URL: https://www.google.com/maps/contrib/103866204909065762496/photos/@43.6431747,-79.3848844,3a,75y,90t/data=!3m8!1e1!3m6!1s-Zo6Ne4BHQew%2FVN2QACwfKhI%2FAAAAAAAAUSQ%2Fmn45l3VLl6gr44MFObg0knp91pnv-1Shw!2e4!3e11!6s%2F%2Flh5.googleusercontent.com%2F-Zo6Ne4BHQew%2FVN2QACwfKhI%2FAAAAAAAAUSQ%2Fmn45l3VLl6gr44MFObg0knp91pnv-1Shw%2Fw203-h100-p-k-no%2F!7i11836!8i5918!4m3!8m2!3m1!1e1!6m1!1e1
  5.  
  6. From the URL, the 4 required parts are:
  7. 1) Zo6Ne4BHQew
  8. 2) VN2QACwfKhI
  9. 3) AAAAAAAAUSQ
  10. 4) mn45l3VLl6gr44MFObg0knp91pnv-1Shw
  11.  
  12. You can use a tool such as http://meyerweb.com/eric/tools/dencoder/ to make decoding the URL easier: paste in the URL and click "Decode" which will add in slashes and make it easier to read and extract the required segments. Decoded output:
  13. https://www.google.com/maps/contrib/103866204909065762496/photos/@43.6431747,-79.3848844,3a,75y,90t/data=!3m8!1e1!3m6!1s-Zo6Ne4BHQew/VN2QACwfKhI/AAAAAAAAUSQ/mn45l3VLl6gr44MFObg0knp91pnv-1Shw!2e4!3e11!6s//lh5.googleusercontent.com/-Zo6Ne4BHQew/VN2QACwfKhI/AAAAAAAAUSQ/mn45l3VLl6gr44MFObg0knp91pnv-1Shw/w203-h100-p-k-no/!7i11836!8i5918!4m3!8m2!3m1!1e1!6m1!1e1
  14.  
  15. Once you've isolated the required segments, insert them into the iframe code below:
  16. <iframe frameborder="0" width="640" height="360" style="border: 0" src="https://maps.google.com/maps?layer=c&panoid=F:-[1st]/[2nd]/[3rd]/[4th]&ie=UTF8&source=embed&output=svembed&cbp=1%2C25%2C%2C0.15%2C10" allowfullscreen=true></iframe>
  17.  
  18. e.g. <iframe frameborder="0" width="640" height="360" style="border: 0" src="https://maps.google.com/maps?layer=c&panoid=F:-Zo6Ne4BHQew/VN2QACwfKhI/AAAAAAAAUSQ/mn45l3VLl6gr44MFObg0knp91pnv-1Shw&ie=UTF8&source=embed&output=svembed&cbp=1%2C25%2C%2C0.15%2C10" allowfullscreen=true></iframe>
  19.  
  20. Lastly, adjust the direction, zoom, and tilt by changing the last three numbers in the URL:
  21. From the iframe code above: cbp=1%2C25%2C%2C0.15%2C10
  22. - Direction: 25
  23. - Zoom: 0.15
  24. - Tilt: 10
  25.  
  26. You can test out the iframe code with a live previewer such as http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe
Add Comment
Please, Sign In to add comment