An image map contains distinct areas on an image that link to a web address. Using one can be a great benefit when designing an online escape room, as it allows you to add links to clues and activities on your background image. Several tools are available for doing this, but it can get complicated, and if you change the image size, the links will be in the wrong locations. A simple solution to this is to use Google Drawings. Here's how you do that.
When signed into your Google account, go to: https://docs.google.com/drawings
A page will open in Drawings with a blank drawing canvas.
At the top left, you will see "Untitled drawing." Click on it and change the file name.
The first step is to locate an image that will work for your room. If you already have one, that's great, but if you still need to, Google has a number of these available. To locate an image that will work for your "room." Click on "Insert" and select "Image." If you already have one, select "Upload from computer." If you do not have one, Google has a number of these available. Select "Search the web."
If you are searching the web for your room image, type in keywords in the search bar. These can include room, office, lab, classroom, etc. Select your image and click on the "Insert" button that appears. It will be placed on your drawing canvas. You may resize the image if you like. In the screenshot below, the word office was used to search for a room. The one outlined in yellow was chosen.
You can add other items on the background image to better work with your escape room. Once again, select "Insert" and "Search the web." In the image search bar, type in what you are looking for and "transparent background." Sometimes this doesn't work, but you can usually add the item, and it will not have a background so that it will appear as if it is part of your original background image. Here is an example of that. The potted plant, laptop, whiteboard, and TV/Monitor scene were all added to the background image.
Once you have your background image and any other items you would like in your escape room, you are ready to define your hotspots with links to pages on your Google Site. You have a couple of choices for defining a hotspot. The first is to select the "Shape" tool in the Drawings toolbar. In the following example, the shape selected was a rectangle.
The rectangle was drawn around the TV screen as shown in the screenshot below.
The next step is to add the link. Be sure that the shape you added is selected. Right click on it and select "Link" and paste the link to the page in your Google Site to which you want the participant to go when the item is selected.
In the window that opens, paste the URL for the Google Site page. Make sure that the link you use for the page is what it will be when published in Google Sites. If you are in edit mode in Google Sites, you can get the published URL for the page by clicking on the link icon in the top right and then select "Copy link."
Then you can go back to your image in Google Drawings and paste the link.
There may be times when the item you would like to use for your hotspot is irregular and not one of the shapes available in Drawings. If this is the case, you can select the "Line" tool to the left of the "Shape" tool and select either "Curve" or "Polyline" to draw an irregular shape around the object you would like to use as the hotspot.
Here is an example. Remember, it doesn't need to be perfect since the fill and border will be transparent. It just needs to cover the general area.
When you use these tools, you add a link differently. Select the object you created, then select the three dots and the link icon from the toolbar. Add the link.
Note that the rectangle and the other image have a fill and border. You don't want those to appear in your escape room. The next step is to remove them. With the object selected, pick the fill icon and then the "Transparent" button.
Do the same for the border. Select the border icon and then the "Transparent" button.
Before leaving your drawing, there are two more things to do. The first is to be sure you have given your drawing a name. This will be helpful when you search for it.
The second is to share the drawing. Otherwise it will not show up on your Google Site to anyone else besides you. To do this select the "Share" button in the upper right. When the window appears under "General Access" select "Anyone with the link" and then the "Done" button.
Once you have created the shapes for all hotspots, added the links, and named and shared the image, your image map is ready to be placed on your Google Sites page.
Go to the page on your Google Site where you would like to add the image map. On the right, select "Insert" and "Drive."
Select the "Search" icon and type in the name of your drawing.
Select your drawing.
Finally, select the "Insert" button at the page's bottom right.
The image will appear on your page. Using the "handles" on the selected image, resize it to fit your page.
With the image selected move it to center it using the guides that appear on the page.
Test, test, test to make sure that all of the links work correctly!