West Yellowstone to Gardiner

by grant

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Showing Elevation Along a Path</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://www.google.com/jsapi"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&callback=initMap&libraries=&v=weekly" defer></script>
    <!-- that is googles key for jsfiddle. I think.  -->
    <!-- jsFiddle will insert css and js -->
  </head>

  <body>
    <div>
      <div class='center-me'>
        West Yellowstone to Gardiner ~54 miles.
      </div>
      <div id="map" style="height: 500px"></div>
      <div id="elevation_chart"></div>
      <div class='bottom-r'> <a href="https://developers.google.com/maps/documentation/javascript/examples/elevation-paths" target="_blank">docs</a> </div>
    </div>
  </body>

</html>

CSS

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}

.center-me,
a {
  margin: 10px auto;
  width: 50%;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
}
.bottom-r {
  margin: 20px 10px 10px 10px;
  text-align: right;
  text-decoration: none;
  font-size: 0.775em;
}

/* Optional: Makes the sample page fill the window. */

JavaScript

// Load the Visualization API and the columnchart package.
google.load("visualization", "1", { packages: ["corechart"] });

function initMap() {
  

  var path = [
 { "lat": 44.658880, "lng": -111.098212},{ "lat": 44.654240, "lng": -111.071089},{ "lat": 44.651309, "lng": -111.057013},{ "lat": 44.652775, "lng": -111.045340},{ "lat": 44.651065, "lng": -111.035727},{ "lat": 44.649844, "lng": -111.018561},{ "lat": 44.649844, "lng": -111.006201},{ "lat": 44.653507, "lng": -110.993155},{ "lat": 44.662543, "lng": -110.991438},{ "lat": 44.666450, "lng": -110.986632},{ "lat": 44.668159, "lng": -110.974959},{ "lat": 44.662543, "lng": -110.962943},{ "lat": 44.652775, "lng": -110.956763},{ "lat": 44.649600, "lng": -110.953330},{ "lat": 44.648867, "lng": -110.936164},{ "lat": 44.643982, "lng": -110.917624},{ "lat": 44.643493, "lng": -110.903205},{ "lat": 44.640562, "lng": -110.892218},{ "lat": 44.642028, "lng": -110.877799},{ "lat": 44.646424, "lng": -110.861662},{ "lat": 44.645692, "lng": -110.858573},{ "lat": 44.649600, "lng": -110.846900},{ "lat": 44.650332, "lng": -110.831450},{ "lat": 44.653507, "lng": -110.818747},{ "lat": 44.650821, "lng": -110.802611},{ "lat": 44.649355, "lng": -110.789908},{ "lat": 44.649355, "lng": -110.779952},{ "lat": 44.650332, "lng": -110.772399},{ "lat": 44.654240, "lng": -110.772399},{ "lat": 44.660346, "lng": -110.765189},{ "lat": 44.657415, "lng": -110.759696},{ "lat": 44.660101, "lng": -110.751799},{ "lat": 44.657171, "lng": -110.746306},{ "lat": 44.665473, "lng": -110.745276},{ "lat": 44.669136, "lng": -110.743559},{ "lat": 44.680367, "lng": -110.746649},{ "lat": 44.687690, "lng": -110.744933},{ "lat": 44.692083, "lng": -110.746993},{ "lat": 44.697696, "lng": -110.744589},{ "lat": 44.705261, "lng": -110.745619},{ "lat": 44.714777, "lng": -110.732230},{ "lat": 44.717704, "lng": -110.717124},{ "lat": 44.717460, "lng": -110.710944},{ "lat": 44.721607, "lng": -110.699614},{ "lat": 44.731852, "lng": -110.695494},{ "lat": 44.740144, "lng":...