Skip to content

3. Add an 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.

A parameter is a variable that stores information for a program to use.

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.

Find an image of a location from your area guide.

From a new tab or window, open Google maps.

Type one 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 whatyou 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 image.”

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

Right click or use keyboard commands to 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.

Run the onOpen function.

Save your code.

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.

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

Click on the image in the sidebar.

It‘s interactive!

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

Now, it’s your turn: Search for a place from your guide in Google Maps, and get a street view image.

Find the “embed image” link.

Copy and paste it into your code.

Run your program.

Then, check out the image in your sidebar.

When you’re finished, move on to the next video.

Next arrow_forward
Instructions
  1. Search for a place from your Guide in Google Maps, and get a street view image.
  2. Click "Share or embed image," and copy and paste the image link into your code.
  3. Run the program.
  4. Click the image to look around the street view of your location.
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/)