jQuery addClass example

Change class name on click in jQuery

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="mts"></div><span id="x"></span>

CSS

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


.gmap3{
        margin: 20px auto;
        border: 1px dashed #C0C0C0;
        width: 260px;
        height: 300px;
      }

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";
// 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();
var lng = marker.getPosition().lng();
//pass the lng value

console.log(lat);
console.log(lng);
              if (infowindow){
                infowindow.open(map, marker);
                infowindow.setContent(content);
              } else {
                $(this).gmap3({
                  infowindow:{
                    anchor:marker, 
                    options:{content: content}
                  }
                });
              }
            }
          }
        });
      }
    }
  },
  map:{
    options:{
      zoom: 11,
      mapTypeId: 'terrain'
    }
  }
});