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="drg">drag me</div>
 <div id="test" class="gmap3"></div>
 <div id="lat"></div>
 <div id="lng"></div>
 <div id="mts"></div>
  <div id="nme"></div>
 <p>xml parse javascript<br>still need to pass the values</p>
<div id="lat2"></div>
<div id="xmlHill"></div>

CSS

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


.gmap3{
        margin: 5px auto;
        border: 1px dashed #C0C0C0;
        width: 260px;
        height: 280px;
      }
 #mts, #lat, #lng, #drg, #nme {
   margin: 0px 20px;
   clear:both;
   font-size:9pt;
   font-weight: lighter;
   font-family: Arial, Helvetica, sans-serif;
 }

JavaScript

//xml parse
var xmlStr = '<markers><marker name="hill" address="addr1" lat="43.77666" lng="-116.244444" type="Rapid"/></markers>';
    var xml = parseXml(xmlStr); 
    console.log(xml);
    // data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
   // var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < markers.length; i++) {
        var name = markers[i].getAttribute("name");
        var address = markers[i].getAttribute("address");
        var type = markers[i].getAttribute("type");
        //          var latlng = markers[i].getPosition();
        var lat = markers[i].getAttribute("lat");
        var lng = markers[i].getAttribute("lng");
        var point = new google.maps.LatLng(
        parseFloat(markers[i].getAttribute("lat")),
        parseFloat(markers[i].getAttribute("lng")));
      
        var html = "<div > <input type='text' id='name' value='" + name + "'/> </div>" +
            "<div > <input type='text' id='lat' value='" + lat + "'/> </div>" +
            "<div ><input type='text' id='lng' value='" + lng + "'/> </div>" ;

    }

function downloadUrl(url, callback) {
    var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
    request.onreadystatechange = function () {
        if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
        }
    };
    request.open('GET', url, true);
    request.send(null);
}

function doNothing() {}

function parseXml(str) {
    if (window.ActiveXObject) {
        var doc = new ActiveXObject('MicrosoftXMLDOM');
        doc.loadXML(str);
        return doc;
    } else if (window.DOMParser) {
        return (new DOMParser).parseFromString(str, 'text/xml');
    }
    }
    //var xx = lat + lng;

$("#test").gmap3({
 marker:{
    latLng: point,
    options:{
      draggable:true,
      title:"drag not click"
    },
    events:{
      dragend:...