title: google maps api places autofill form onload
body: <p>Is there a way to fill in a form on load from the google autocomplete, if I have for instance the place.reference</p>
  
  <p>This code works if I type in the business name, and then from the list I select one, and click on it.</p>
  
  <p>But the key part of my question, is to just pass the reference and be able to get the for filled in.</p>
  
  <pre><code>&lt;?   
      if(isset($_GET["ref"])){
      $ref=htmlspecialchars($_GET["ref"]);
      echo $ref;
      }
  ?&gt;
  &lt;script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;amp;libraries=places" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      function initialize() {
          var input = document.getElementById('searchTextField');
          var autocomplete = new google.maps.places.Autocomplete(input);
          google.maps.event.addListener(autocomplete, 'place_changed', function () {
              var place = autocomplete.getPlace();
              document.getElementById('city2').value = place.name;
              document.getElementById('cityLat').value = place.geometry.location.lat();
              document.getElementById('cityLng').value = place.geometry.location.lng();
              //alert("This function is working!");
              //alert(place.name);
             // alert(place.address_components[0].long_name);
  
          });
      }
      google.maps.event.addDomListener(window, 'load', initialize); 
  &lt;/script&gt;
  &lt;body&gt;
  &lt;input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" /&gt;  
  &lt;input type="text" id="city2" name="city2" /&gt;
  &lt;input type="text" id="cityLat" name="cityLat" /&gt;
  &lt;input type="text" id="cityLng" name="cityLng" /&gt;
  </code></pre>
  
  <p>EDITED FOLLOWING SUGGESTION (but not working):</p>
  
  <pre><code>&lt;script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;amp;libraries=places" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      function initialize() {
          var input = document.getElementById('searchTextField');
          var autocomplete = new google.maps.places.Autocomplete(input);
  var request = {
    reference: 'CnRtAAAAP2oQGVedOeA5z_XkX0-adnnl4hsGlSJNyuJIVEUeBnkrGcfzDw0z0Ffi7GsZBdYtx-Qmbu6ekzUpZpMwJDVVyNDOKwGsd-V5ff_Y9wN4McpGxLJ_u7reNwwlKOEtkoks4dtcpUcuu7w2hI_j0VtnYhIQtfEq0cHTD1Fl1OeL35pzIhoUE8A3wNPUB1jk5lvueDGqwtVpdbo'
  };
  service = new google.maps.places.PlacesService(map);
  /* Here I get this Console Error: Uncaught ReferenceError: map is not defined */
  service.getDetails(request, callback);
  
  function callback(place, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
              document.getElementById('city2').value = place.name;
              document.getElementById('cityLat').value = place.geometry.location.lat();
              document.getElementById('cityLng').value = place.geometry.location.lng();
    }
  }
      }
      google.maps.event.addDomListener(window, 'load', initialize); 
  &lt;/script&gt;
  &lt;body&gt;
  &lt;input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" /&gt;  
  &lt;input type="text" id="city2" name="city2" /&gt;
  &lt;input type="text" id="cityLat" name="cityLat" /&gt;
  &lt;input type="text" id="cityLng" name="cityLng" /&gt; 
  </code></pre>