'How to wait for google geocoder.geocode?

Please, help me with google geocoder.geocode. I know that this function runs asynchronous but i do not know how to handle it.

How to wait for result? Here is my code: My code do not wait for geocode.geocoder so i get undefined instead geolocation. 

<!DOCTYPE html>
<html>     
  <head>        
    <title>Geocoding service     
    </title>          
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />       
    <meta http-equiv="content-language" content="cs" />         

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">            
    <link href="http://code.google.com//apis/maps/documentation/javascript/examples/default.css" rel="stylesheet">     
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>      
<script>

function codeAddress(callback) {   

  var address = document.getElementById('address').value;
  geocoder = new google.maps.Geocoder();
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
  } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  },callback);  
}


function geocoder(result)  {
alert(codeAddress());
}

function button()  {  
  geocoder(codeAddress) ;
  }



    </script>      
  </head>     
  <body>         
    <div id="panel">             
      <input id="address" type="textbox" value="address">             
      <input type="button" value="Go" onclick="button()">         
    </div>         
    <div id="map-canvas">    
    </div>     
  </body>
</html>
asynchronousundefinedwait


Solution 1:[1]

I found solution thank to web page http://recurial.com/programming/understanding-callback-functions-in-javascript/ where is callback step by step explained.

Here is working code:

<!DOCTYPE html>
<html>     
  <head>        
    <title>Geocoding service     
    </title>          
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />       
    <meta http-equiv="content-language" content="cs" />         

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">            
    <link href="http://code.google.com//apis/maps/documentation/javascript/examples/default.css" rel="stylesheet">     
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>      
<script>

function codeAddress(callback) {   

  var address = document.getElementById('address').value;
  geocoder = new google.maps.Geocoder();
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
    souradnice = [results[0].geometry.location.lat(),results[0].geometry.location.lng()];
    callback(souradnice);
  } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });  
}


function gogo(){  
codeAddress(function(num) {
  alert(num);

});
}






    </script>      
  </head>     
  <body>         
    <div id="panel">             
      <input id="address" type="textbox" value="address">             
      <input type="button" value="Go" onclick="gogo()">         
    </div>         
    <div id="map-canvas">    
    </div>     
  </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions