jquery.geocode example 1

An example usage of the jquery.geocode plugin used for client side geocoding requests before form submition.

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<script src="https://cdn.rawgit.com/itay-grudev/jquery.geocode/master/jquery.geocode.min.js"></script>
<form method="post" action="location/12da73/save">
  <legend>Destination Lookup</legend>
  <input type="text" class="geocode-assist" name="query" placeholder="Enter Destination">
  <p class="geocode-error" style="display:none">Error! Could not Lookup Address.</p>

  <legend>Resolution</legend>
  <label>
    Latitude:
    <input disabled="disabled" type="text" class="latitude" name="latitude">
  </label>
  <label>
    Longitude:
    <input disabled="disabled" type="text" class="longitude" name="longitude">
  </label>
  <label>
    Viewport:
    <textarea disabled="disabled" type="text" class="viewport" name="viewport"></textarea>
  </label>
</form>

CSS

* { font-family: Helvetica, Arial, sans-serif; font-size: 0.87rem }
label { display: block;  }
legend { margin: 0.5rem 0.5rem 0.5rem 0; font-size: 1.2rem }
input { width: 73.5%; margin: 0.2rem 0; }
.geocode-error {
    margin: 0.2rem 0;
    padding: 5px;
    color: red;
    background: #fff0f0;
}

JavaScript

$(function(){
    $('.geocode-assist').geocode();
});