ADHP Workshop: Snapping 360 Images from Google Street View

This is the 2nd of 3 videos from the Austin Digital Heritage Project Workshop Series aimed at helping educators, parents and volunteers make authentic connections with BIPOC youth while learning digital literacy and basic coding skills. In this video we cover our approach to helping students build Emotional IQ through storytelling and the steps for snapping 360 images from Google Street View and using them to create immersive experiences.

What You’ll Need

• Computer or laptop
• Free account on the coding platform Glitch.com
• Install Street View Download 360 for Mac or Windows
• Presentation Slides

Video Table of Contents

Intro: Building Emotional IQ Through Storytelling
Using Google Street View to Find Your Place of Significance 21:48 minutes
Getting The Panorama ID and Downloading Your Image 39:48 minutes
Remixing Your Image Into An Immersive Experience 45:40 minutes

Below is a Remix template that you’ll use to complete the activity. Use your mouse to move around within the 360 environment and the Play/Mute buttons to hear the audio. The asset that you’ll be “remixing” today is the 360 image. You may also consider replacing the audio and text elements as well.

Remix Your Own

1. Using the project above, select View Source and then Remix to Edit 
2. Go to Assets over on the left-hand side of the screen. If you have assets you’d like add (images or audio), you can drag and drop them here.
3. Once you’ve uploaded files, mouse over them and click. You’ll see a thumbnail of the image/file. Click Copy Url button. This is the Url of the asset that you’ll be pasting into the index.html file.
4. Go to index.html file (upper left side of the screen).
5. Find <a-assets> tag. You’ll see an <img> tags and <audio> tag. The one with the id scene_01 represents the 360 image that is currently being used in the project. The Urls within the src tags are the ones you’ll want to replace with your own. Select the Url for the image you’d like to replace and paste your own into it. 
6. If you have an audio file, copy the Url from within the assets folder and locate the <audio> tag within the index.html file. Replace its Url with that of yours. 
7. To see what your remix looks like, click the Show Live button. Your project will open in a new tab of the browser.
8. The content will load in a new tab on the browser. View Live