title: Using button click instead of body onload
body: <p>I'm attempting to use the Google geocoder API to enter user's location information directly into a form (reverse geocoding). I am using the most popular answer in <a href="https://stackoverflow.com/questions/6797569/html5-geolocation-easiest-way-to-get-city-name">this</a> post as a code base. </p>
  
  <p>My form is correctly populated when I use <em>body onload="initialize()"</em> as shown in that answer. However when I attempt to initiate the function using a button nothing happens (I remove the body onload attribute). I have tried the following two variations.</p>
  
  <pre><code>&lt;a href="javascript:;" style="center" onclick="initiate()" class="button"&gt;Get Geolocation data&lt;/a&gt;
  
  &lt;input type="button" value="Get Geolocation Data" onclick="initiate()"&gt;
  </code></pre>
  
  <p>Could someone please point out my mistake? Full code is as follows:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
  &lt;head&gt; 
  &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"/&gt; 
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"/&gt; 
  &lt;title&gt;Reverse Geocoding&lt;/title&gt; 
  
  &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript"&gt; 
    var geocoder;
  
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
  } 
  //Get the latitude and the longitude;
  function successFunction(position) {
      var lat = position.coords.latitude;
      var lng = position.coords.longitude;
      codeLatLng(lat, lng)
  }
  
  function errorFunction(){
      alert("Geocoder failed");
  }
  
    function initialize() {
      geocoder = new google.maps.Geocoder();
  
  
  
    }
  
    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) {
        console.log(results)
          if (results[1]) {
           //formatted address
           alert(results[0].formatted_address)
          //find country name
               for (var i=0; i&lt;results[0].address_components.length; i++) {
              for (var b=0;b&lt;results[0].address_components[i].types.length;b++) {
  
              //there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
                  if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
                      //this is the object you are looking for
                      city= results[0].address_components[i];
                      break;
                  }
              }
          }
          //city data
          alert(city.short_name + " " + city.long_name)
  
  
          } else {
            alert("No results found");
          }
        } else {
          alert("Geocoder failed due to: " + status);
        }
      });
    }
  &lt;/script&gt; 
  &lt;/head&gt; 
  &lt;body onload="initialize()"&gt; 
  
  &lt;/body&gt; 
  &lt;/html&gt; 
  </code></pre>
  
  <p>Many thanks in advance.</p>