Front Page V4 CONCEPT

This is the front page of the site

by spadez

HTML

<script src="http://maps.google.com/maps/api/js?sensor=true&amp;libraries=places&amp;.js"></script>
        <form id="search_form">
            <input id="loc" class="input" placeholder="Location" type="text" tabindex=2></input>
            <br /><br />
            Lat: <input class="hidden" id="lat" disabled="true"></input><br />
            Long:<input class="hidden" id="lng" disabled="true"></input><br />
                        Locality:<input class="hidden" id="locaility" disabled="true"></input><br />
                        Level 2:<input class="hidden" id="level2" disabled="true"></input><br />
                        Level 1:<input class="hidden" id="level1" disabled="true"></input><br />
            Country Short:<input class="hidden" id="country_short" disabled="true"></input><br />
                        Country Long:<input class="hidden" id="country_long" disabled="true"></input><br /><br />

            
            <input type="submit" value="Search" class="button" id="search" tabindex=3>
        </form>

CSS

.input {padding: 10px 12px; min-width: 250px;}

JavaScript

$(function () {
  var input = $("#loc"),
      lat   = $("#lat"),
      lng   = $("#lng"),
      lastQuery  = null,
      lastResult = null, // new!
      autocomplete;
  
  function processLocation(callback) { // accept a callback argument
    var query = $.trim(input.val()),
        geocoder;
  
    // if query is empty or the same as last time...
    if( !query || query == lastQuery ) {
      callback(lastResult); // send the same result as before
      return; // and stop here
    }
  
    lastQuery = query; // store for next time
  
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({ address: query }, function(results, status) {
      if( status === google.maps.GeocoderStatus.OK ) {
        lat.val(results[0].geometry.location.lat());
        lng.val(results[0].geometry.location.lng());
        lastResult = true; // success!
      } else {
        alert("Sorry - We couldn't find this location.");
        lastResult = false; // failure!
      }
      callback(lastResult); // send the result back
    });
  }
 
autocomplete = new google.maps.places.Autocomplete(input[0], {
  types: ["geocode"],
});
  
  google.maps.event.addListener(autocomplete, 'place_changed', processLocation);
  
  $('#search_form').on('submit', function (event) {
    var form = this;
    
    event.preventDefault(); // stop the submission
    
    processLocation(function (success) {
      if( success ) { // if the geocoding succeeded, submit the form
        form.submit()
      }
    });
    
  });
});