gmaps3 js elevation draggable marker

drag a marker for lat lng & elv

by grant

HTML

<script src="https://lrio.com/php/js/gmap3.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
 <div id="test" class="gmap3"></div>
 <div id="lat"></div>
 <div id="lng"></div>
 <div id="mts"></div><span id="x"></span>

CSS

body {
 /* background: #20262E;*/
  padding: 20px;
  font-family: Helvetica;
}


.gmap3{
        margin: 5px auto;
        border: 1px dashed #C0C0C0;
        width: 260px;
        height: 280px;
      }
 #mts {
   display: inline;
 }

 #x {
   display: inline;
 }

JavaScript

var hill = {lat:43.666, lng:-116.24}; 
$("#test").gmap3({
 marker:{
    latLng: hill,
    options:{
      draggable:true
    },
    events:{
      dragend: function(marker){
        $(this).gmap3({
          getelevation:{
            latLng:marker.getPosition(),
            callback:function(results){
              var map = $(this).gmap3("get"),
                  infowindow = $(this).gmap3({get:"infowindow"}),
     content = results && results[0] ? Math.round(results[0].elevation) + " meters" : "no result"
     var lat = marker.getPosition().lat();
var elv = Math.round(results[0].elevation);                  
// this is the answer
//print the value
document.getElementById('mts').innerHTML = Math.round(results[0].elevation);
// pass the value
document.getElementById('mts').value = Math.round(results[0].elevation);
var lat = marker.getPosition().lat();
document.getElementById('lat').innerHTML = lat.toFixed(6);
var lng = marker.getPosition().lng();
document.getElementById('lng').innerHTML = lng.toFixed(6);
//pass the lng value
console.log(elv);
console.log(lat);
console.log(lng);
              if (infowindow){
                infowindow.open(map, marker);
                infowindow.setContent(content);
              } else {
                $(this).gmap3({
                  infowindow:{
                    anchor:marker, 
                    options:{content: content + '<br>' + lat.toFixed(6) + '<br>' + lng.toFixed(6)}
                  }
                });
              }
            }
          }
        });
      }
    }
  },
  map:{
    options:{
      zoom: 11,
      mapTypeId: 'terrain'
    }
  }
});