Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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
- 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.
- 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
- From the URL, the 4 required parts are:
- 1) Zo6Ne4BHQew
- 2) VN2QACwfKhI
- 3) AAAAAAAAUSQ
- 4) mn45l3VLl6gr44MFObg0knp91pnv-1Shw
- 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:
- 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
- Once you've isolated the required segments, insert them into the iframe code below:
- <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>
- 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>
- Lastly, adjust the direction, zoom, and tilt by changing the last three numbers in the URL:
- From the iframe code above: cbp=1%2C25%2C%2C0.15%2C10
- - Direction: 25
- - Zoom: 0.15
- - Tilt: 10
- 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