Adding+Content

Google Earth placemark descriptions may be customized to contain a wealth of information in the form of text, hyperlinks, images, and videos. In fact, you do not actually insert images or videos into the description boxes; you copy and paste "embed" code from the source where the images or video are located (for example, from [|www.flickr.com] or [|www.youtube.com]). This is not a difficult process, so don't worry! [|Jerome Burg] published a [|one page cheat sheet] that I've found very helpful. It's worth printing out and keeping on hand. This wiki page goes into a bit more detail when explaining the various possibilities for adding content to placemark descriptions, especially on how to embed images and video (steps 4 and 5).

Take a look at the placemark description box (below left) and its companion code (below right). Instructions on how to construct such a description follow (steps 1 - 5).


 * [[image:ave_of_dead_box.JPG align="left"]] || [[image:ave_of_dead_code.JPG align="right"]] ||

1. Adding and formatting text
This is straightforward - type whatever text you want to appear in the description box for your placemark. If you want to jazz it up with formatting (bold, italics, underline, etc.), you will have to manually add the HTML code to accomplish this. Again, don't worry, this is not difficult!

HTML formatting code is written in pairs (called "tags") - one tag to start the formatting, one tag to stop the formatting. The "start" tag takes the form < > and the "stop" tag takes the form . The letters or phrases within those brackets determine the type of formatting you are applying to the desired text. For example, the ''' tag says, "Start **bold** now." The ''' tag says, "Stop **bold** now." Any text that is typed between these two tags is **bold**. It was a cold and stormy night. would appear in the description box as follows: **It was a cold and stormy night.**

For **bold**, use the following tags:   For //italics//, use the following tags:   For __underline__, use the following tags:

You may use more than one set of tags on a selection of text. For example, if you want text to be **bold** and __underlined__, include both tags: " Sit down! " he said loudly. would appear in the description box as "__**Sit down!**__" he said loudly.

Take a look at the first block of HTML code in the Google Earth - Edit Placemark picture above. Does it make sense now?

2. Adding hyperlinks
You may include hyperlinks to external websites in a placemark's description. Again, you will have to manually add the HTML code to accomplish this, but it is a simple process. There are two components to a hyperlink: 1 - the //text// you want people to click to open the hyperlink and 2 - the actual URL you want to open in a browser when someone clicks the hyperlink text. For example, you may include a sentence that says, "Click here to learn more about this topic." The word "here" is the hyperlink text; the website that will open in a browser is included in the HTML code. Let's create a hyperlink!

The HTML code for a hyperlink has two tags, like formatting code. The start or "open" tag for a hyperlink is where href=" " contains the URL of the website you are linking to, and the stop or "close" tag is . The formula for HTML code for a hyperlink is as follows:

hyperlink text to click goes here

An actual hyperlink in HTML code for the sentence "Click __here__ to go to Harpeth Hall's website." would look like this: Click here to go to Harpeth Hall's website.

The word "here" is surrounded by the HTML tags , with the hyperlink address included in the href="URL" portion of the "open" tag.

Review the second block of HTML code in the Google Earth - Edit Placemark picture above. Do you recognize the HTML code formula for a hyperlink? Do you see a tag that hasn't been defined yet? Step 3 introduces the and tags.

3. Controlling line spacing
In the Avenue of the Dead description box above, notice that there is one blank line between the blocks of text numbered 1, 2 and 3, but none between text 3 and the inserted image labeled 4. You must manually insert HTML tags to indicate when you want the text to reflect hitting the "Enter" key on your keyboard OR when you want "Enter" + a blank line of text.

inserts a line break - similar to hitting the "Enter" key on your keyboard. inserts a paragraph break - similar to hitting the "Enter" key twice. A blank line precedes the new line of text.

Look at the third block of code in the Google Earth - Edit Placemark picture above. Compare the code to the Avenue of the Dead description, paying attention to the location of the tags and tags.

A word of caution - when I typed the text and code, I included blank lines in the Google Earth - Edit Placemark box to help me keep blocks of text separate in my own mind. Had I not included the and tags, the description box would have been one single block of text (as shown below - there are blank lines in the Edit Placemark box, but they do not translate to blank lines in the Avenue of the Dead description since I removed the and tags).


 * [[image:ave_of_dead_box2.JPG]] || [[image:ave_of_dead_code2.JPG]] ||

4. Posting images (e.g., from flickr)
It is quite easy to include an image in the Properties box of a placemarker, as long as the image is posted on the internet and has a unique URL. The HTML code is comprised of three parts: the opening tag, the URL of the image, and the closing tag. Once you get the URL for the image, open the Properties box and add the line of code following the formula below. It may be challenging at times to find online images that may be used without violating the photographer's copyright. Several sites, such as [|flickr], are repositories of millions of images, many of which may be used through [|Creative Commons] licensing. At flickr, go to Advanced Search and put a check in the box for "Only search within **Creative Commons**-licensed content" to limit your search results to images whose owners are willing for them to be used by others. Please note, if the owner doesn't allow downloads of the photo, you will not be able to use the image in Google Earth. If the owner DOES allow downloads of the photo, click the "Different Sizes" link and click the image size you want to include in your placemarker Description. Right click the image and select "Copy Image Location" (Firefox) to copy the image's unique URL. Here is an example of a flickr URL: http://farm4.static.flickr.com/3271/3068275694_ecc75bcfec_m.jpg -- note that is has the word "static" in it, as well as ends in ".jpg". [|Go here] to read flickr's explanation of how to get the URL of the actual image you want to use.
 * Opening tag || Image URL || Closing tag ||
 *  ||

Check the FAQ sections of other image-sharing sites to learn how to obtain the unique URLs for desired images.

One other way to get URLs for images that are not at image-sharing sites, but are simply images on a webpage, is to right click on the image and select "Copy Image Location". That command copies the URL to your clipboard and you may paste it in the placemarker's property box with the HTML tags. The code shown in the table above is an example of a webpage image URL.

NOTE: A good image size to shoot for is height and/or width no greater than 400 px. If the original image is 3504 X 2336, change the height and width settings in the img src tag by adding two parameters: height and width. You must ensure to maintain the original image's aspect ratio when resizing or the resultant image will be distorted. For example, the width of the example is 3504 px and height is 2336 px. If we set the greater dimension (width) to 400 px, calculate the height using ratios: height = 400 (2336/3504) = 267. The adjusted HTML tag is: 

5. Embedding video (e.g., from YouTube)
You may embed videos that are posted online in the placemarker's Property box. YouTube is an often-used source; however many news sites (CNN, Fox News, C-SPAN, etc.) and other video-sharing sites provide the same information that will be presented with YouTube as the example. Once you have found the desired YouTube video, notice the gray box to the right of the video. See the box labeled “Embed:”? Select ALL of the text in that box and hit CTRL-C to copy the text. To embed the video in the placemarker's Property box, simply paste the code in the box. || The code will look something like this:   
 * < [[image:1youtube.JPG align="left"]][[image:file:C:%5CDOCUME%7E1%5Cuserid%5CLOCALS%7E1%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_image002.jpg width="373" height="175"]] ||< In this example, the person who posted the video is called AceFielder. This likely will be different for whatever video you are using.

Note that the width and height of the video window are defined in the embed code. If you want to resize the window, make sure that you keep the aspect ratio the same or the video will be distorted (see the instructions in the Images section).