Get Started Contact sales

    Elevation Element

    Elevation Standalone Element

    The ElevationElement is an HTML element that visually displays elevation data for a single point or a polyline. It shows a graph of elevation along the path set in the path property with an array of latitude and longitude coordinates. Line segments are interpolated between the points of the array, so even a small number of points will still produce a detailed elevation graph.

    Set path elevation using coordinates

    The following example renders the elevation of a path between two points selected by a set of coordinates, using a gmp-elevation element.

    The element is configured for metric measurement using the unit-system attribute:

    <gmp-elevation unit-system="metric"></gmp-elevation>

    A querySelector is used to select the elevation element and set its path property with latitude and longitude coordinates:

     /** Maps JS loaded callback */ 
 async 
  
 function 
  
 init 
 () 
  
 { 
  
 // Load the Elevation Element from Maps JS 
  
 const 
  
 { 
 ElevationElement 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 'elevation' 
 ); 
  
 // Specify an elevation path to render 
  
 const 
  
 elevationElement 
  
 = 
  
 document 
 . 
 querySelector 
 ( 
 'gmp-elevation' 
 ); 
  
 elevationElement 
 . 
 path 
  
 = 
  
 [ 
  
 { 
 lat 
 : 
  
 37.4523 
 , 
  
 lng 
 : 
  
 - 
 122.2645 
 }, 
  
 { 
 lat 
 : 
  
 37.377 
 , 
  
 lng 
 : 
  
 - 
 122.4078 
 }, 
  
 ]; 
 }

    See the complete code example

    JavaScript

     /** Maps JS loaded callback */ 
 async 
  
 function 
  
 init 
 () 
  
 { 
  
 // Load the Elevation Element from Maps JS 
  
 const 
  
 { 
 ElevationElement 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 'elevation' 
 ); 
  
 // Specify an elevation path to render 
  
 const 
  
 elevationElement 
  
 = 
  
 document 
 . 
 querySelector 
 ( 
 'gmp-elevation' 
 ); 
  
 elevationElement 
 . 
 path 
  
 = 
  
 [ 
  
 { 
 lat 
 : 
  
 37.4523 
 , 
  
 lng 
 : 
  
 - 
 122.2645 
 }, 
  
 { 
 lat 
 : 
  
 37.377 
 , 
  
 lng 
 : 
  
 - 
 122.4078 
 }, 
  
 ]; 
 } 
 init 
 ();

    CSS

     html 
 , 
  
 body 
  
 { 
  
 margin 
 : 
  
 0 
 ; 
  
 padding 
 : 
  
 0 
 ; 
 } 
 gmp-elevation 
  
 { 
  
 width 
 : 
  
 100 
 % 
 ; 
  
 height 
 : 
  
 100 
 % 
 ; 
 } 
 . 
 overlay 
  
 { 
  
 margin 
 : 
  
 20 
 px 
 ; 
  
 width 
 : 
  
 400 
 px 
 ; 
 }

    HTML

    <!DOCTYPE html>
<html>
  <head>
    <title>Simple Elevation</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>Path elevation</h1>
        <div class="overlay">
          <gmp-elevation unit-system="metric"></gmp-elevation>
        </div>
    <script>
      (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
        key: "YOUR_API_KEY",
        v: "alpha"
      });
    </script>
  </body>
</html>

    Set path elevation using a polyline

    The following example renders the elevation of a path based on a user-drawn polyline. It obtains the path from the user's polyline using polyline.getPath().getArray() : 

      
 elevationElem 
 . 
 path 
  
 = 
  
 polyline 
 . 
 getPath 
 (). 
 getArray 
 ();

    See the complete code example

    JavaScript

     const 
  
 map 
  
 = 
  
 document 
 . 
 querySelector 
 ( 
 'gmp-map' 
 ); 
 const 
  
 elevationElem 
  
 = 
  
 document 
 . 
 querySelector 
 ( 
 'gmp-elevation' 
 ); 
 async 
  
 function 
  
 init 
 () 
  
 { 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 'places' 
 ); 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 'marker' 
 ); 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 'elevation' 
 ); 
  
 map 
 . 
 innerMap 
 . 
 setOptions 
 ({ 
 'mapTypeControl' 
 : 
  
 true 
 , 
  
 'clickableIcons' 
 : 
  
 false 
 }); 
  
 findCurrentLocation 
 (); 
  
 drawPolyline 
 (); 
 } 
 async 
  
 function 
  
 drawPolyline 
 () 
  
 { 
  
 const 
  
 { 
 DrawingManager 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 'drawing' 
 ); 
  
 const 
  
 drawingManager 
  
 = 
  
 new 
  
 DrawingManager 
 ({ 
  
 drawingMode 
 : 
  
 google 
 . 
 maps 
 . 
 drawing 
 . 
 OverlayType 
 . 
 POLYLINE 
 , 
  
 drawingControl 
 : 
  
 true 
 , 
  
 drawingControlOptions 
 : 
  
 { 
  
 position 
 : 
  
 google 
 . 
 maps 
 . 
 ControlPosition 
 . 
 TOP_CENTER 
 , 
  
 drawingModes 
 : 
  
 [ 
 google 
 . 
 maps 
 . 
 drawing 
 . 
 OverlayType 
 . 
 POLYLINE 
 ] 
  
 }, 
  
 polylineOptions 
 : 
  
 { 
 geodesic 
 : 
  
 true 
 , 
  
 strokeColor 
 : 
  
 '#5491f5' 
 , 
  
 strokeWeight 
 : 
  
 6 
 } 
  
 }); 
  
 drawingManager 
 . 
 setMap 
 ( 
 map 
 . 
 innerMap 
 ); 
  
 drawingManager 
 . 
 addListener 
 ( 
 'polylinecomplete' 
 , 
  
 ( 
 polyline 
 ) 
  
 => 
  
 { 
  
 console 
 . 
 log 
 ( 
 'complete' 
 ); 
  
 console 
 . 
 log 
 ( 
 polyline 
 . 
 getPath 
 (). 
 getArray 
 ()); 
  
 elevationElem 
 . 
 path 
  
 = 
  
 polyline 
 . 
 getPath 
 (). 
 getArray 
 (); 
  
 polyline 
 . 
 addListener 
 ( 
 'click' 
 , 
  
 ( 
 e 
 ) 
  
 => 
  
 { 
  
 console 
 . 
 log 
 ( 
 e 
 ); 
  
 }); 
  
 }); 
 } 
 async 
  
 function 
  
 findCurrentLocation 
 () 
  
 { 
  
 const 
  
 { 
 LatLng 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 'core' 
 ); 
  
 if 
  
 ( 
 navigator 
 . 
 geolocation 
 ) 
  
 { 
  
 navigator 
 . 
 geolocation 
 . 
 getCurrentPosition 
 ( 
  
 ( 
 position 
 ) 
  
 => 
  
 { 
  
 const 
  
 pos 
  
 = 
  
 new 
  
 LatLng 
 ( 
 position 
 . 
 coords 
 . 
 latitude 
 , 
  
 position 
 . 
 coords 
 . 
 longitude 
 ); 
  
 map 
 . 
 innerMap 
 . 
 panTo 
 ( 
 pos 
 ); 
  
 map 
 . 
 innerMap 
 . 
 setZoom 
 ( 
 16 
 ); 
  
 }, 
  
 () 
  
 => 
  
 { 
  
 console 
 . 
 log 
 ( 
 'The Geolocation service failed.' 
 ); 
  
 map 
 . 
 innerMap 
 . 
 setZoom 
 ( 
 16 
 ); 
  
 }, 
  
 ); 
  
 } 
  
 else 
  
 { 
  
 console 
 . 
 log 
 ( 
 `Your browser doesn't support geolocation` 
 ); 
  
 map 
 . 
 innerMap 
 . 
 setZoom 
 ( 
 16 
 ); 
  
 } 
 } 
 init 
 ();

    CSS

     html 
 , 
  
 body 
  
 { 
  
 height 
 : 
  
 100 
 % 
 ; 
  
 margin 
 : 
  
 0 
 ; 
 } 
 body 
  
 { 
  
 display 
 : 
  
 flex 
 ; 
  
 flex-direction 
 : 
  
 column 
 ; 
  
 font-family 
 : 
  
 Arial 
 , 
  
 Helvetica 
 , 
  
 sans-serif 
 ; 
 } 
 h1 
  
 { 
  
 font-size 
 : 
  
 16 
 px 
 ; 
  
 text-align 
 : 
  
 center 
 ; 
 } 
 gmp-map 
  
 { 
  
 box-sizing 
 : 
  
 border-box 
 ; 
  
 margin-top 
 : 
  
 20 
 px 
 ; 
  
 width 
 : 
  
 100 
 % 
 ; 
  
 height 
 : 
  
 100 
 % 
 ; 
 } 
 gmp-elevation 
  
 { 
  
 width 
 : 
  
 100 
 % 
 ; 
  
 height 
 : 
  
 300 
 px 
 ; 
 } 
 . 
 overlay 
  
 { 
  
 width 
 : 
  
 800 
 px 
 ; 
 }

    HTML

    <!DOCTYPE html>
<html>
  <head>
    <title>Path Elevation</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>Draw polyline and get path elevation</h1>
    <gmp-map center="-37.813,144.963" zoom="12" map-id="DEMO_MAP_ID">
        <div id="elevation-container" class="overlay" slot="control-block-end-inline-center">
          <gmp-elevation unit-system="metric"></gmp-elevation>
        </div>
    </gmp-map>
    <script>
      (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
        key: "YOUR_API_KEY",
        v: "alpha"
      });
    </script>
  </body>
</html>
    Create a Mobile Website
    View Site in Mobile | Classic
    Share by: