jquery.geocode example 2

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

by Itay Grudev

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 class="geocode-map-assist" method="post" action="location/12da73/save">
    <legend>Destination Lookup</legend>
    <label>
        <input type="text" class="address-line" name="address-line-1" placeholder="Address Line 1">
    </label>
    
    <label>
        <input type="text" class="address-line" name="address-line-2" placeholder="Address Line 2 (Optional)">
    </label>
    <label>
        <input type="text" class="locality" name="city" placeholder="City">
    </label>
    <label>
        <input type="text" class="postal-code" name="postal-code" placeholder="Postal code">
    </label>
    <label>
        <select class="country-code" name="country"><option value="">Select Country</option><option value="AF">Afghanistan</option>
<option value="AX">Åland Islnds</option><option value="AL">Albania</option><option value="DZ">Algeria</option><option value="AS">American Samoa</option><option value="AD">Andorra</option><option value="AO">Angola</option><option value="AI">Anguilla</option><option value="AQ">Antarctica</option><option value="AG">Antigua and Barbuda</option><option value="AR">Argentina</option><option value="AM">Armenia</option><option value="AW">Aruba</option><option value="AU">Australia</option><option value="AT">Austria</option><option value="AZ">Azerbaijan</option><option value="BS">Bahamas</option><option value="BH">Bahrain</option><option value="BD">Bangladesh</option><option value="BB">Barbados</option><option value="BY">Belarus</option><option value="BE">Belgium</option><option value="BZ">Belize</option><option value="BJ">Benin</option><option value="BM">Bermuda</option><option value="BT">Bhutan</option><option value="BO">Bolivia, Plurinational State of</option><option value="BQ">Bonaire, Sint Eustatius and Saba</option><option value="BA">Bosnia and...

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; }
select { width: 75% } 
.geocode-map {
    position: relative;
    width: 75%;
    height: 220px;
}
.geocode-map:after {
    width: 22px;
    height: 40px;
    display: block;
    content: ' ';
    position: absolute;
    top: 50%; left: 50%;
    margin: -40px 0 0 -11px;
    background: url('https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png');
    background-size: 22px 40px; /* Since I used the HiDPI marker version this compensates for the 2x size */
    pointer-events: none; /* This disables clicks on the marker. Not fully supported by all major browsers, though */
}
.geocode-error {
    margin: 0.2rem 0;
    padding: 5px;
    color: red;
    background: #fff0f0;
}

JavaScript

$(function(){
    $('.geocode-map-assist').geocode({
      map: {
        selector: '.geocode-map',
        googleMapOptions: {
          streetViewControl: false
        }
      },
      multipleFields: true
    });
});