{"id":745,"date":"2020-10-17T18:21:41","date_gmt":"2020-10-17T18:21:41","guid":{"rendered":"https:\/\/geteach.com\/blog\/?p=745"},"modified":"2021-05-16T13:54:02","modified_gmt":"2021-05-16T13:54:02","slug":"spice-up-google-earth-projects-with-custom-html","status":"publish","type":"post","link":"https:\/\/geteach.com\/blog\/2020\/10\/17\/spice-up-google-earth-projects-with-custom-html\/","title":{"rendered":"Spice up Google Earth Projects with Custom HTML"},"content":{"rendered":"\n<p>One of the most requested features I get asked about is adding narration or audio to Google Earth Projects. Recently, I was fortunate to participate in a Google for Good 2020 session were Jordon Mears and I discussed how to approach adding audio to Google Earth Projects via Earth\u2019s custom HMTL option. (<a rel=\"noreferrer noopener\" href=\"https:\/\/earthoutreachonair.withgoogle.com\/events\/geoforgood20\/watch?talk=talk-8\" target=\"_blank\">Click here to watch full presentation &#8211; Free on-demand<\/a>)<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Geo for Good Summit 2020 - Spice up Google Earth Projects with Custom HTML\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/hyEfZba6ZEQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption><a rel=\"noreferrer noopener\" href=\"https:\/\/earthoutreachonair.withgoogle.com\/events\/geoforgood20\/watch?talk=talk-8\" target=\"_blank\">Click here to watch full presentation &#8211; Free On-Demand<\/a><\/figcaption><\/figure>\n\n\n\n<p>Thanks for those who watched the session. However, as an educator, I understand the need to offer a non-serial version and examples of our 15-minute conversation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Resources:<\/h2>\n\n\n\n<p>Code Editor: Visual Studio Code (Code editor from session) <a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/code.visualstudio.com\/<\/a><\/p>\n\n\n\n<p>Hosted MP3 file: &nbsp;<a href=\"https:\/\/storage.googleapis.com\/geteachkml4\/Sound_Effects_Applause.mp3\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/storage.googleapis.com\/geteachkml4\/Sound_Effects_Applause.mp3<\/a><\/p>\n\n\n\n<p>HTML Templates: <a href=\"https:\/\/github.com\/geteach\/geteachGeology\/tree\/master\/eGEW\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/geteach\/geteachGeology\/tree\/master\/eGEW<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/earth.google.com\/earth\/rpc\/cc\/drive?state=%7B%22ids%22%3A%5B%221S8OlzO3e8CrsnC651x-2Gr8tJT16E68b%22%5D%2C%22action%22%3A%22open%22%2C%22userId%22%3A%22114806792266281742035%22%7D&amp;usp=sharing\" target=\"_blank\" rel=\"noreferrer noopener\">Google Earth Project Example Link<\/a> (Feel free to make a copy)<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Start simple<\/h2>\n\n\n\n<p>For me, when working with HTML and Google Earth, starting with the most basic snippet, then working up, saves hours of development time.<\/p>\n\n\n\n<p>Our inquiry begins with\u2026Can HTML audio tag work in Google Earth Web?<\/p>\n\n\n\n<p>Finding the simplest code example often starts with Google search, \u201chtml Audio.\u201d &nbsp;These searches often lead me to school. <a href=\"https:\/\/www.w3schools.com\/html\/html5_audio.asp\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.w3schools.com\/html\/html5_audio.asp<\/a><\/p>\n\n\n\n<p>From here, I will take their \u201cTry it Yourself\u201d snippet and replace their mp3 with one of my own.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;body&gt;\n\n&lt;audio controls&gt;\n  &lt;source src=\"https:\/\/storage.googleapis.com\/geteachkml4\/Sound_Effects_Applause.mp3\" type=\"audio\/mpeg\"&gt;\nYour browser does not support the audio element.\n&lt;\/audio&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Copy and Paste the modified code into Google Earth Web and hear it work.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Simple HTML Audio - Google Earth Web\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/it0xN-A9AIk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption>Simple HTML Audio &#8211; Google Earth Web<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Spice it up!<\/h2>\n\n\n\n<p>Now that we know the html audio tag works, we can spice up the style of the page with a little more HTML, CSS, and simple JavaScript. You can always create your own, but if you don\u2019t have the time, feel free to use a template from this GitHub repository (<a href=\"https:\/\/github.com\/geteach\/geteachGeology\/tree\/master\/eGEW\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/geteach\/geteachGeology\/tree\/master\/eGEW<\/a>). The snippet below is using the oneImageAudio.html example found in repository.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html>\n    &lt;head>\n        &lt;meta charset=\"UTF-8\">\n        &lt;title>Simple Audio with One Image&lt;\/title>\n        &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        &lt;link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto:100,200,300,400,500|Roboto+Slab|Material+Icons\" type=\"text\/css\" \/>\n        &lt;link rel=\"stylesheet\" href=\"https:\/\/code.getmdl.io\/1.3.0\/material.blue_grey-blue.min.css\" \/>\n        &lt;link rel=\"stylesheet\" href=\"https:\/\/geteach.com\/gti\/drp\/scripts\/egew.css\" type=\"text\/css\" \/>\n    &lt;\/head>\n    &lt;body>\n        &lt;div id=\"container\">\n            &lt;main class=\"panelMain\">\n                &lt;div class=\"mediaContain\">\n                    &lt;div class=\"slideshow-container\">\n&lt;!--First media in Carousel--Best Image Aspect Ratio 3:2 Replace Image Source (src) bellow-->\n                        &lt;div class=\"mySlides fade\">\n                            &lt;img class=\"image\"src=\"https:\/\/storage.googleapis.com\/geteachkml4\/seafloorage\/seafloor480.jpg\">\n                            &lt;div class=\"captionDiv\">\n                                &lt;div class=\"caption\" >Replace Caption&lt;\/div>\n                            &lt;\/div>\n                        &lt;\/div>\n                    &lt;\/div>\n                &lt;\/div>\n                &lt;div class=\"content\" id=\"content\">\n&lt;!--Replace title text between div-->\n                    &lt;div class=\"title\">\n                        Replace title\n                    &lt;\/div>\n&lt;!--Replace mp3 source (src=\"youraudio.mp3\")-->\n                    &lt;audio id=\"audioI\" style=\"display:none\" >\n                        &lt;source src=\"https:\/\/storage.googleapis.com\/geteachkml4\/Sound_Effects_Applause.mp3\" type=\"audio\/mpeg\">\n                            Your browser does not support the audio tag.\n                    &lt;\/audio>\n                    &lt;span class=\"mdl-chip mdl-chip--contact audioPlay\" style=\"width:85px;margin-left: 8px;\">\n                        &lt;span class=\"mdl-chip__contact mdl-color-text--white\" style=\"margin-right: 5px;\"id=\"playIcon\">\n                            &lt;i class=\"material-icons\">play_arrow&lt;\/i>\n                        &lt;\/span>\n                        &lt;span class=\"mdl-chip__text\" id=\"playButton\">Play&lt;\/span>\n                    &lt;\/span>\n&lt;!--Replace text for description--Every &lt;p> needs to have a class=\"text\"--Any html works-->\n                    &lt;div class=\"description\">\n                        &lt;p class=\"text\">Replace description...If you need a new paragraph the class=\"text\"&lt;\/p>\n                    &lt;\/div>\n                &lt;\/div>\n&lt;!--Best image height for footer is 24px with a max-width of 145px-->\n&lt;!--If you don't want the footer is it best to delete the html within the logoLeft\/LogoRight Div-->\n                &lt;div class=\"footer\">\n                    &lt;div class=\"logoLeft\">\n                        &lt;a href=\"https:\/\/twitter.com\/geteach\" target=\"_blank\">\n                            &lt;img src=\"https:\/\/storage.googleapis.com\/geteachkml4\/logogeteachtemp.png\" >\n                        &lt;\/a>\n                    &lt;\/div>\n                    &lt;div class=\"logoRight\" style=\"display:none\">\n                    &lt;\/div>\n                &lt;\/div>\n            &lt;\/main>\n        &lt;\/div>\n    &lt;\/body>\n    &lt;script src=\"https:\/\/geteach.com\/gti\/drp\/scripts\/egew0521.js\">&lt;\/script>\n    &lt;script defer src=\"https:\/\/code.getmdl.io\/1.3.0\/material.min.js\">&lt;\/script>\n&lt;\/html><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Custom HTML Audio - Google Earth Web\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/EXTz4MxGHr4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption>Custom HTML Audio &#8211; Google Earth Web<\/figcaption><\/figure>\n\n\n\n<p>There are several HTML files in the repository for you to use, modify, or recreate. &nbsp;You can reach me <a href=\"https:\/\/twitter.com\/geteach\" target=\"_blank\" rel=\"noreferrer noopener\">@geteach<\/a> on twitter if you need help exploring, creating, or sharing this Earth.<\/p>\n\n\n\n<p>Read more about my Google Geo fun here: Decade of Google Geo EDU (<a href=\"https:\/\/geteach.com\/blog\/2020\/01\/26\/decade-of-google-geo-edu\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/geteach.com\/blog\/2020\/01\/26\/decade-of-google-geo-edu\/<\/a>)<\/p>\n\n\n\n<p>Or read some other Google Geo post here: <a href=\"https:\/\/geteach.com\/blog\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/geteach.com\/blog<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the most requested features I get asked about is adding narration or audio to Google Earth Projects. Recently, I was fortunate to participate in a Google for Good 2020 session were Jordon Mears and I discussed how to approach adding audio to Google Earth Projects via Earth&rsquo;s custom HMTL option. (Click here to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-745","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/geteach.com\/blog\/wp-json\/wp\/v2\/posts\/745","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geteach.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geteach.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geteach.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geteach.com\/blog\/wp-json\/wp\/v2\/comments?post=745"}],"version-history":[{"count":20,"href":"https:\/\/geteach.com\/blog\/wp-json\/wp\/v2\/posts\/745\/revisions"}],"predecessor-version":[{"id":797,"href":"https:\/\/geteach.com\/blog\/wp-json\/wp\/v2\/posts\/745\/revisions\/797"}],"wp:attachment":[{"href":"https:\/\/geteach.com\/blog\/wp-json\/wp\/v2\/media?parent=745"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geteach.com\/blog\/wp-json\/wp\/v2\/categories?post=745"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geteach.com\/blog\/wp-json\/wp\/v2\/tags?post=745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}