Kick off the new school year with lessons from our Back to School 2022 collection to help students express themselves, build relationships, and stay organized.

3. Add an Interactive Image to Your Area Guide

Playback Speed:
Transcript

In the last video, you created a sidebar in Google Sheets.

That was the first step in your program.

In this video, you will code the part of the program that shows an image of a location in the sidebar.

To do this, you will replace the word "Page" in the sidebar with an image from Google Maps.

Make sure the script editor is still open.

Check out the code.

The word page is a parameter.

Replace the parameter page with different text.

That new parameter changes what the program does.

Select the function "showSidebar" and run the program.

The text in the sidebar is what you typed in.

Nice job!

When you make a new program, it helps to make a small change, then test the code to see how it affects the end result.

Next, add an image of a place to the side panel so your users can see what each place looks like.

To do this, replace this text with the location of an image.

This is called passing in a parameter.

First, find an image of a location from your area guide.

Go to Google Maps.

From a new tab or window, open Google maps.

Then, type 1 of the locations in your guide into the Google Maps search box.

If Google Maps doesn’t look the same on your screen as it does in this video, don’t worry!

Online tools are updated all the time.

Just explore the webpage until you find what you need.

Click the street view image.

Next, embed the image of this location in your spreadsheet.

To embed an image or file means to insert it into a webpage, document, spreadsheet, or other project.

Click the menu.

Choose share or embed image.

Click embed.

Finally, select the small size to ensure the image will fit in the sidebar.

Copy the embedded image link from the box.

Next, return to your code.

Paste the link in the parentheses, replacing the text you typed in.

Be sure to keep the single quotation marks and paste the link between them.

The text between these quotation marks is called a String.

The computer will use this text exactly as you type it.

Save your code.

Then, run the onOpen function.

Now when you click the custom menu and show sidebar, the image from Google Maps appears.

Nice work!

If you don’t see the image or if you get an error message, check your code and test it again.

Check to see if you pasted the link in the right place.

Make sure the single quotation marks and parentheses are still in place.

Stick with it!

It often takes more than one try to get code to work.

If you need help, ask a neighbor.

Click on the image in the sidebar.

It‘s interactive!

You can click and move it around to get different views of the location.

Instructions

  1. Search for a place from your guide in Google Maps and get a street view image.
  2. Copy the embed image link and paste it into your code.
  3. Run the program.
  4. Check out the image in your sidebar.
Attributions
  • "Happy Alley by Kevin MacLeod" by incompetech.com (http://incompetech.com/music/royalty-free/index.html?isrc=USUAN1100482) -- Licensed under Creative Commons: By Attribution 3.0 License (http://creativecommons.org/licenses/by/3.0/)