title: Add custom (get location) option to Google Autocomplete
body: <p>I currently have a styled pac-input on my page for use with the Google Autocomplete from the Places Library. I've been trying to add an option for get location to the top of the drop down list but no luck.</p>
  
  <p><img src="https://i.stack.imgur.com/7BtLE.png" alt="enter image description here"></p>
  
  <p>Javascript (i'm no js wiz) - </p>
  
  <pre><code>  var lat = 'empty';
      var lng = 'empty';
      var placeSearch, autocomplete;
      var place;
      var geocoder;
  
  
      function initialize() {
  
    geocoder = new google.maps.Geocoder();
    // Create the autocomplete object, restricting the search
    // to geographical location types.
    autocomplete = new google.maps.places.Autocomplete(
        /** @type {HTMLInputElement} */(document.getElementById('pac-input')),
        { types: ['geocode', 'establishment'], 
          componentRestrictions: {country: 'GB'}});
    // When the user selects an address from the dropdown,
    // populate the address fields in the form.
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
    place = autocomplete.getPlace();
        lat = place.geometry.location.lat();
        lng = place.geometry.location.lng();
        document.getElementById('please').style.display = "none";
        document.getElementById('lat').innerHTML="Latitude: " + lat + 
    "&lt;br&gt;Longitude: " + lng;  
    });
  
  }
  
  
  function getlocation() {
   if (navigator.geolocation)
      {
      navigator.geolocation.getCurrentPosition(showPosition);
      $('#wait').show();
      $('#getlocation').hide();
  
      }
    else{document.getElementById('lat').innerHTML="Geolocation is not supported by this browser.";}
    }
  
  
  function showPosition(position)
    {
    lat = position.coords.latitude;
    lng = position.coords.longitude;
    var latlng = new google.maps.LatLng(lat, lng);
    geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[0]) {
          document.getElementById('pac-input').value = (results[0].formatted_address.split(",")[0]);
        } else {
          alert('No results found');
        }
      } else {
        alert('Geocoder failed due to: ' + status);
      }
    });
    $('#wait').hide();
    $('#getlocation').show();
     document.getElementById('lat').innerHTML="Latitude: " + lat + 
    "&lt;br&gt;Longitude: " + lng;  
        document.getElementById('please').style.display = "none";
    }
  
  function blurred() {
  /////////bug if type and select location, click out, retype and click out. can i store the name as variable and check value against that?
    var beginning = document.getElementById('pac-input').value.split(",")[0];
    place = autocomplete.getPlace();
    if (! place) {
      lat = 'empty';
      lng = 'empty';
      document.getElementById('lat').innerHTML="Latitude: " + lat + 
    "&lt;br&gt;Longitude: " + lng;  
    } else {  if (! place.geometry) {
      lat = 'empty';
      lng = 'empty';
      document.getElementById('lat').innerHTML="Latitude: " + lat + 
    "&lt;br&gt;Longitude: " + lng;  
    }else{ if (beginning != place.name) {
      lat = 'empty';
      lng = 'empty';
      document.getElementById('lat').innerHTML="Latitude: " + lat + 
    "&lt;br&gt;Longitude: " + lng;  
    }}}
  
  if (lat == 'empty') {
    document.getElementById('please').style.display = "inline-block";
  }}
  
  
  function focused() {
    document.getElementById('pac-input').value = "";
    if (lat != 'empty'){
    lat = 'empty';
    lng = 'empty';
  }}
  </code></pre>
  
  <p>HTML - </p>
  
  <pre><code> &lt;body onload="initialize()"&gt;
      &lt;div id="center"&gt;
      &lt;div id="areacontainer"&gt;
        &lt;input id="pac-input" placeholder="Area..." value=""
               onFocus="focused()" onblur="blurred()" type="text" onchange="go()"&gt;
        &lt;/input&gt;
        &lt;div id="getlocation" onclick="getlocation()"&gt;&lt;/div&gt;&lt;div id="wait"&gt;&lt;/div&gt;
      &lt;/div&gt;
        &lt;div id="lat"&gt;&lt;/div&gt;
        &lt;div id="please"&gt;Please enter a valid location.&lt;/div&gt;
    &lt;/div&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p>Thanks for any help.</p>