payette sf with elev graph

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 id="map" style="height: 250px"></div>
      <div id="elevation_chart"></div>
      <div class='center-me'> <a href="https://developers.google.com/maps/documentation/javascript/examples/elevation-paths" target="_blank">google 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: 0 auto;
  width: 20%;
  text-decoration: none;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

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

function initMap() {
  

  var path = [
 { lat: 44.092477, lng: -116.042806},
 { lat: 44.091984, lng: -116.045767},
 { lat: 44.091429, lng: -116.048428},
 { lat: 44.090874, lng: -116.051775},
 { lat: 44.090504, lng: -116.053535},
 { lat: 44.090011, lng: -116.054522},
 { lat: 44.089765, lng: -116.055380},
 { lat: 44.089395, lng: -116.056582},
 { lat: 44.089210, lng: -116.057955},
 { lat: 44.089210, lng: -116.059071},
 { lat: 44.089580, lng: -116.060444},
 { lat: 44.089795, lng: -116.061517},
 { lat: 44.090196, lng: -116.062204},
 { lat: 44.091522, lng: -116.064435},
 { lat: 44.092415, lng: -116.065766},
 { lat: 44.093155, lng: -116.067225},
 { lat: 44.094080, lng: -116.068984},
 { lat: 44.094819, lng: -116.070787},
 { lat: 44.095898, lng: -116.072804},
 { lat: 44.097717, lng: -116.074778},
 { lat: 44.098919, lng: -116.076495},
 { lat: 44.100059, lng: -116.077696},
 { lat: 44.100614, lng: -116.078640},
 { lat: 44.100768, lng: -116.080271},
 { lat: 44.101353, lng: -116.081387},
 { lat: 44.101600, lng: -116.082674},
 { lat: 44.100922, lng: -116.083661},
 { lat: 44.100121, lng: -116.084992},
 { lat: 44.099196, lng: -116.086623},
 { lat: 44.097963, lng: -116.088811},
 { lat: 44.096730, lng: -116.090485},
 { lat: 44.096052, lng: -116.091944},
 { lat: 44.095682, lng: -116.092545},
 { lat: 44.093895, lng: -116.093661},
 { lat: 44.092046, lng: -116.094862},
 { lat: 44.090504, lng: -116.096236},
 { lat: 44.089271, lng: -116.097137},
 { lat: 44.087299, lng: -116.098424},
 { lat: 44.085696, lng: -116.100356},
 { lat: 44.084617, lng: -116.102373},
 { lat: 44.083784, lng: -116.104046},
 { lat: 44.083415, lng: -116.106106},
 { lat: 44.083230, lng: -116.107737},
 { lat: 44.083230, lng: -116.109969},
 { lat: 44.083538, lng: -116.112758},
 { lat: 44.084278, lng: -116.114990}
]; //; sf payette

  const map = new google.maps.Map(document.getElementById("map"),...