It looks like Google Earth Web has stopped supporting onclick events. Therefore the code snippets from the videos have changed to utilize event listeners. After some thought, I am not going to recreate vs code extension. This GitHub repository is where all the latest html files reside.

I was super excited when the Google Earth team launched content creation tool for Google Earth on Web. Mainly because these tools allow students and teachers an easy way to explore, create, and share their stories; their knowledge. I was equally excited the Earth team created a platform that allowed for custom HTML within these creation tools. With custom HTML, users can create narrated tours, quizzes, video stories, timing animations, etc. However, custom HTML adds complexity which requires a little extra know-how.

On occasion I get asked to create tutorials on how I create some of these special HTML Earth projects like quizzes. I am hesitant to create these for several reasons. First, I am a high school social studies teacher and not a developer. Yes, I have created some cool (my subjective opinion) Google Earth projects and have a successful Google Maps API website, but that is just me goofing off while attempting to find ways to engage my students. Second, I have been wrestling with how to meet the needs of the greatest number of people. The classroom gives educators and learners the space to cycle through feedback loops; a learning flow. This format does not allow for this immediate and meaningful feedback.

With these in mind, I came up with this tutorial blog/video series for creating custom HTML Google Earth projects. 

The challenge:  Create a three question Google Earth Quiz; choosing Google Earth Quizzes for this series because a number of people have asked. 

The series is designed in seven parts. Experienced HTML creators can jump to Part IV, while people who have never created a simple web page may want to begin their journey from the start;  setting up a coding environment to creating a web page using HTML, CSS, and JavaScript. That stated, if you can copy/paste you can create your own Google Earth Quiz. All the HTML and CSS templates will be on GitHub, so the entire process could be done in a day or two.

Enjoy creating and feel free to share. Please let me know if you would like more tutorials on custom HTML for Google Earth on Web. You can find me on twitter @geteach.

Part I Setting Up a Coding Environment

Challenge I:

For part I,  we will create a coding environment that matches the instructional videos. If you already have a text editor you like (ie. Notepad++ or BBEdit) you will be fine. My assumption is that you already know a little about coding, so you will be able to follow along.

Outcomes:

  1. Install and learn to navigate Visual Studio Code
  2. Create Project Folder
  3. Create our first web page together

Resources/Links:

Vocabulary/Concepts:

  • Text Editor (Editor)
  • Hyper Text Markup Language (HTML) Structure
  • Tags
    • <head>
    • <title>
    • <body>

Challenge I: Video

Part II Install Visual Studio Code Extensions and Style New Web Page…Twice:)

Challenge II: 

In this challenge, we will install a couple of extensions in Visual Studio Code to make coding easier. In addition we will explore inline styling followed by cascading style sheets. 

Outcomes:

  1. Install live server and rainbow tags vs code extensions
  2. Inline style our web page
  3. Create .css file and move the inline style to this file

Resources/Links:

Vocabulary/Concepts:

  • Local Server
  • Tags
    • <div> block element
  • Styles
    • Background-color
    • Width
    • Height
    • color
  • Cascading Style Sheet (.css)
    • Class

Challenge II: Video

Part III Create Google Earth Custom HTML Info Box

Challenge III:

This video will demonstrate how to make a more complex webpage to insert into Google Earth on Web. We will go through the process of using a provided HTML template to create something custom.

Outcome:

  1. Finally(ish)…we are going to create our first complex custom HTML info box using Visual Studio Code!

Resources/Links:

Vocabulary/Concepts:

  • Tags
    • Comment HTML <!– Comments go here –> ( Toggle using CTRL + / )
    • <p> (paragraph)
    • <img> (Empty Tag Images)
    • <a> (anchor link)

Challenge III: Video

Part IV Create Google Earth Custom HTML Question Info Box

Challenge IV:

It is time to take what we learned and ask some questions. For this challenge we will create/modify the custom HTML Question box template.

Outcome:

  1. Alright, Alright, Alright, Alight…Create three question panels for Google Earth!

Resources/Links:

Vocabulary/Concepts:

Challenge IV: Video

Part V Create Google Earth Custom HTML Answer Info Box

Challenge V:

Now that we have created three question panels we need to create three response panels.

Outcome:

  1. Create custom html answer pages

Resources/Links:

Vocabulary/Concepts:

  • Review style classes

Challenge V: Video

Part VI Create Initial Google Earth Quiz Project

Challenge VI:

Create a Google Earth Project with our question and answer panels.

Outcome:

  1. Create Google Earth Project
  2. Add Custom HTML panels to project
  3. Position camera for each question/answer feature.

Resources/Links:

Vocabulary/Concepts:

  • Features (aka placemarks, paths, polygons)
  • Set camera view (snapshot)

Challenge VI: Video

Part VII The End – Add javascript for Table of Contents

Challenge VII:

Now that the custom HTML files are styled, it is time to add a little script to trick Google’s Table of Contents.

Outcomes:

  1. Add Click(); event to show and flyto answers feature
  2. Add onwindows load event to hide all answers and flyto question features

Resources/Links:

Vocabulary/Concepts:

  • javascript
  • Function
  • Fire event
  • window.onload
  • Show/hide
  • Flyto
  • Internal anchor links (<a>)
  • Click();

Challenge VII: Video

Thanks…