Add an Interactive Image to Your Area Guide

In this video, you will add code to include 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.

To begin, make sure Apps Script is still open.

In your code, the word Page is a parameter.

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

Next, replace the parameter "Page" with different text to change what appears in the sidebar.

Then, select the function "showSidebar" and run the program.

The text in the sidebar is what you typed in.

When you are writing code, 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 the parameter text with the location of an image.

This is called passing in a parameter.

First, go to Google Maps and search for a location from your area guide.

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 and find an image you like of the location.

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.

Copy the "Embed a map" link.

Make sure to select the small size to ensure the image will fit in the sidebar.

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.

Then, save your code and run the onOpen function.

Now when you open the sidebar, the image from Google Maps appears.

The image in the sidebar is interactive.

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

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

Check 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.

Now, it's your turn: Search for a place from your guide in Google Maps and get a street view image, copy and paste the "Embed a map" link into your code, run your program, and check out the image in your sidebar.