title: jquery and google places autocomplete
body: <p>I would like to add the Google Places address autocomplete search to a form.  I see the example code <a href="https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform" rel="nofollow noreferrer">HERE</a>.  I am using jquery and have my ready function in a separate js file.  I have put the example functions into that external js file and it is being loaded.</p>
  
  <p>I have my API key in the Google API <code>script</code> tag. but the <code>callback=initAutocomplete</code> js function is not being called.</p>
  
  <p>My script section looks like -- yes, I have a real API key: </p>
  
  <pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"
          integrity="..." crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;script src="https://maps.googleapis.com/maps/api/js?key=&lt;MY-API-KEY&gt;&amp;libraries=places&amp;callback=initAutocomplete"
          async defer&gt;&lt;/script&gt;
  
  &lt;script src="js/index.js'"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>The <code>index.js</code> file looks mostly like:</p>
  
  <pre><code>$(function () {
      ...
  
      $("#addressLookup").on('focus', geolocate());
  });
  
  var autocomplete;
  
  function initAutocomplete() {
      // Create the autocomplete object, restricting the search to geographical
      // location types.
      autocomplete = new google.maps.places.Autocomplete(
          /** @type {!HTMLInputElement} */(document.getElementById('addressLookup')),
          {types: ['geocode']});
  
      // When the user selects an address from the dropdown, populate the address
      // fields in the form.
      autocomplete.addListener('place_changed', fillInAddress);
  }
  
  function fillInAddress() {
      // Get the place details from the autocomplete object.
      var place = autocomplete.getPlace();
      console.log("fillInAddress: place");
      console.dir(place);
  }
  
  // Bias the autocomplete object to the user's geographical location,
  // as supplied by the browser's 'navigator.geolocation' object.
  function geolocate() {
      if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function (position) {
              var geolocation = {
                  lat: position.coords.latitude,
                  lng: position.coords.longitude
              };
              var circle = new google.maps.Circle({
                  center: geolocation,
                  radius: position.coords.accuracy
              });
              autocomplete.setBounds(circle.getBounds());
          });
      }
  }
  </code></pre>
  
  <p>I don't see anything barfing in the js console log.  I do not see the Google stuff loading in the Developer Tools "Network" panel.</p>
  
  <p>What have I missed?</p>