HTML 5 Geo Location grabber

Grab current location and displays on Map. https://www.linkedin.com/groups/Get-Current-Addres-Using-HTML5-121615.S.5900226530742652931?view=&item=5900226530742652931&type=member&gid=121615&trk=eml-b2_anet_digest-hero-11-hero-disc-0&midToken=AQE6wPt0IONg8Q&fromEmail=fromEmail&ut=0RyqQzmM7YMSk1

by prasun_sultania

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&quot;"></script>
<div id="container">
    
  
    <input id="btn" type="button" value="click to get current Addres"/>  <br/><br/>
    
    Status : <span id="status"> </span><br/><br/>
    
    Latitude: <span id="latitude"></span>       <br/> <br/>
     
    Longitude: <span id="longitude"></span> <br/> <br/>
    Address:<span id="address"> </span>
    
    <div id="map-canvas">        
    </div>
    
    <div class="address-container">
        
    </div>

</div>

CSS

#container{
    width:700px;
    height:500px;
    background-color:#DDDEEE;
    margin:20px 20px;
    position:relative;
}
.status-remove{
    display:none;
}

#map-canvas{
    position:absolute;
    right:0;
    top:0;
    width:480px;
    height:500px;
    background-color:#DDDFFF;
}
#address{width:150px;text-align:justify;display:block}

JavaScript

function showLocation(){
    
    var btn = document.getElementById("btn");
    
    btn.addEventListener("click",onClick,false);
    
    var statusElement = document.getElementById('status');
    var lt;
    var ln;
    
    var geocoder;
    function initialize() {
        
        geocoder = new google.maps.Geocoder();
    }
    
    initialize();
    
    function onClick(e){
   
       statusElement.innerHTML = "Loading....";
        
        if(navigator.geolocation) {
           navigator.geolocation.getCurrentPosition(callMeBack);
        } else {
            alert("Geolocation is not supported by this browser.");
        }
       
    }
    
    function callMeBack(position){
        
       lt = position.coords.latitude;
       ln = position.coords.longitude;
         
       statusElement.className = "status-remove";
        
       document.getElementById('latitude').innerHTML = lt;
       document.getElementById('longitude').innerHTML = ln;
        
       codeLatLng(lt,ln);
       mapInitialize(lt,ln)
        
    }

    function codeLatLng(lat, lng) {
        
        var latlng = new google.maps.LatLng(lat, lng);
        geocoder.geocode({'latLng': latlng}, function(results, status) {
            
          if(status == google.maps.GeocoderStatus.OK) {   
              
              if(results[1]) {
                  var address = results[0].formatted_address;                  
                  document.getElementById('address').innerHTML = address;
                  
              } else {
                
              }
          } else {
              alert("Geocoder failed due to: " + status);
          }
        });
        
    }
    
    function mapInitialize(lt,ln) {
        
      var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(lt,ln)
      };
      var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
    
      
    }

   

}


showLocation();