Google Earth is increasingly focused on the platform's web version (GEW), instead of the resource-intensive desktop version (GED).
Google Earth Web (GEW) is browser based, and loads and unloads information as needed. Thus, it is lighter and much faster, and can also be used on smaller portable devices, like tablets and smartphones. However, functionality is very limited compared to the powerful desktop version.
In response, we developed two approaches that offer enhanced Google Earth Web functionality: GeoTrips and GeoExplorations.
Here is a 2020 10min presentation on enhancedGEW that describes GeoTrips and GeoExplorations. Updated code is below.
GeoTrips replaces the standard info panel with a panel that supports animations, videos, StreetView, GigaPan, voice-overs, text with embedded images, linked activities and weblinks.
eGEW-GeoTrips allows a mix of standard GEW pages and enhanced GEW pages, offering easy implementation.
Do it yourself ......
Add a feature with location. This feature will be edited by adding special html code. No need to know about html coding. In fact, don't change anything outside the instructions below.
Add a feature with location. This feature will be edited by adding special html code. No need to know about html coding. In fact, don't change anything outside the instructions below.
GeoTrips example code
Here is the html code that is inserted in a stop/feature.
Copy the code below in an editor, like Notepad+. Change the highlighted links and captions/text with your own (pictures, video, sound, text). Don't change other settings or delete links to script files. Save your file locally and copy the customized text; then paste (as plain txt) in the GEW html box.
Voila, you have eGEW ....
Here is the html code that is inserted in a stop/feature.
Copy the code below in an editor, like Notepad+. Change the highlighted links and captions/text with your own (pictures, video, sound, text). Don't change other settings or delete links to script files. Save your file locally and copy the customized text; then paste (as plain txt) in the GEW html box.
Voila, you have eGEW ....
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MD fieldtrip</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500|Roboto+Slab|Material+Icons" type="text/css" />
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-blue.min.css" />
<link rel="stylesheet" href="https://geteach.com/gti/drp/scripts/egew.css" type="text/css" />
</head>
<body>
<div id="container">
<main class="panelMain">
<div class="mediaContain">
<div class="slideshow-container">
<!--First media in Carousel--Best Image Aspect Ratio 3:2 Replace Image Source (src) below-->
<div class="mySlides fade">
<img class="image"src="https://psgt.earth.lsa.umich.edu/MDfieldtrip/20190413_095042.jpg">
<div class="captionDiv">
<div class="caption" >Students hammering resistant, veined phyllite-quartzite unit. Source: <a href="https://psgt.earth.lsa.umich.edu/" target="_blank">PSGT</a></div>
</div>
</div>
<div class="mySlides fade">
<img class="image" src="https://psgt.earth.lsa.umich.edu/MDfieldtrip/20170408_091741.jpg" />
<div class="captionDiv">
<div class="caption">Refolded folds in veined phyllitic greywacke. Source: <a href="https://psgt.earth.lsa.umich.edu/" target="_blank">PSGT</a></div>
</div>
</div>
<div class="mySlides fade">
<img class="image" src="https://psgt.earth.lsa.umich.edu/MDfieldtrip/2-1.jpg" />
<div class="captionDiv">
<div class="caption">Geologic Map around Stop 2-1. Source: <a href="https://www.usgs.gov/products/maps/geologic-maps" target="_blank">USGS</a></div>
</div>
</div>
<!--Second media in Carousel--# the name of anchor link to match the id ex. 1 for name and Video1 for video id--replace video source (src) mp4 and poster image below-->
<div class="mySlides fade">
<a href="#" name="1" class="playPauseVideoClass">
<video class="videoMedia" id="video1" width="480" height="270" poster="https://psgt.earth.lsa.umich.edu/MDfieldtrip/maryland.jpg">
<source src="https://psgt.earth.lsa.umich.edu/MDfieldtrip/maryland.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="playoverlay" style="display:block;"></div>
<span class="mediaIcon mdl-button mdl-button--icon mdl-js-button">
<i class="material-icons">pause</i>
</span>
</a>
<!--Second media caption--progress bar, start-time, end-time ids must match/add the anchor number from above ex. progressbar1, start-time1, end-time1-->
<div class="captionDiv" style="padding:0">
<div id ="progressbar1" class ="mdl-progress mdl-js-progress progressbar"></div>
<div id="counter" class="counter">
<div id="start-time1" class="start">00:00</div>
<div class="captionVideo">Video of Maryland USA</div>
<div id="end-time1" class="end">2:32</div>
</div>
</div>
</div>
<!--Third media in Carousel--# the name of anchor link to match the id ex. 2 for name and Video2 for video id--replace mp4 and poster image below-->
<!--name="x" replace name="2" then add the number 2 to video id...replace to video (id="video2") in video tag-->
<!--Third media caption--progress bar, start-time, end-time ids must match/add the anchor number from above ex. progressbar2, start-time2, end-time2-->
<a class="prev minusSlidesClass">❮</a>
<a class="next plusSlidesClass">❯</a>
</div>
</div>
<div class="content" id="content">
<!--Replace title text between div-->
<div class="title">
Stop 2-1: Gambrill Park overlook
</div>
<!--Replace mp3 or m4a source (src="youraudio.mp3")-->
<audio id="audioI" style="display:none" >
<source src="https://psgt.earth.lsa.umich.edu/MDfieldtrip/voice.m4a" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<span class="mdl-chip mdl-chip--contact audioPlay" style="width:85px;margin-left: 8px;">
<span class="mdl-chip__contact mdl-color-text--white" style="margin-right: 5px;"id="playIcon"><i class="material-icons">play_arrow</i></span>
<span class="mdl-chip__text" id="playButton">Play</span>
</span>
<!--Replace text for description--Every <p> needs to have a class="text"--Any html works-->
<div class="description">
<p class="text">Stop 2-1 is the overlook at High Knob in Gambrill State Park, which is on the eastern limb of the Blue Ridge anticlinorium. Looking to the west, we can get a good feel for the structure and physiography of the anticlinorium. Exposed at the crest and eastern flank of the ridge are the resistant rocks of the Lower Cambrian Loudoun and Weverton Formations. On the western flank is the Late Precambrian Catoctin Formation consisting of greenstones and greenschists (or phyllites). The protoliths of these rocks are basalts, volcanogenic sediments, and volcanic ash deposits. Several phases of folding can be seen at High Knob. Evidence lies in the multiple cleavages and lineations. This is an excellent locality to see overprinting relations of several generations of structural fabrics.</p>
<p class="text">Looking to the west, we can get a good feel for the structure and physiography of the anticlinorium. Exposed at the crest and eastern flank of the ridge are the resistant rocks of the Lower Cambrian Loudoun and Weverton Formations. On the western flank is the Late Precambrian Catoctin Formation consisting of greenstones and greenschists (or phyllites). The protoliths of these rocks are basalts, volcanogenic sediments, and volcanic ash deposits. Several phases of folding can be seen at High Knob. Evidence lies in the multiple cleavages and lineations. This is an excellent locality to see overprinting relations of several generations of structural fabrics.</p>
<p><img src="https://psgt.earth.lsa.umich.edu/MDfieldtrip/MDlegendText.jpg" width="400" /></p>
</div>
</div>
<!--Best image height for footer is 24px with a max-width of 145px-->
<!--If you don't want the footer delete the <a href .... /a> html within the logoLeft/LogoRight Div-->
<div class="footer">
<div class="logoLeft">
<a href="mailto:vdpluijm@umich.edu?subject=Email from GEW-MDfieldtrip" target="_blank"></a>
</div>
<div class="logoRight" style="display:none">
</div>
</div>
</main>
</div>
</body>
<script src="https://geteach.com/gti/drp/scripts/egew0621.js"></script>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</html>
GeoExplorations adds globe overlays for points, lines, polygons and images with embedded information and hotlinks
Georeferenced point overlays (like real-time earthquakes), line/text overlays (like plate boundaries) and image overlays (like geologic maps) can be used. Also, locations on hotlinked overlays or a specific points can be queried and link to more detailed information
Because GEW’s globe layer is affected, GeoExplorations requires that all pages in a module are similarly modified, so it is a more involved application that requires additional planning. Details will be posted at a future time. Try these examples in the meantime.
