SO - 17214486

by fiddlegrimbo

HTML

<script src="http://maps.google.com/maps/api/js?sensor=true&amp;libraries=places&amp;.js"></script>
<h1>Form</h1>

<form id="geocode_form">
    <input id="geokeyword" placeholder="Keyword" type="text" />
    <input id="loc" placeholder="Location" type="text" />
    <br />
    <input class="hidden" id="ctry" disabled="true" value="us" />
    <input class="hidden" id="lat" disabled="true" />
    <input class="hidden" id="lng" disabled="true" />
    <input type="submit" value="Geocode + Submit" class="button" id="search" />
    <input type="submit" value="Geocode" class="button" id="geosearch" />
</form>

CSS

h1 {
    font-size: 1.2em;
    margin: 1em 0 1.2em;
}
p {
    font-size: 0.8em;
    font-weight: bold;
    margin-bottom: 2em;
}

JavaScript

$(function () {

    function processLocation(history, submit) {
        // only passing submit==false will prevent auto-submission
        submit = (false !== submit);

        geocode().then(function (query, results) {
            var form = $("#geocode_form"),
                lat = form.find("#lat"),
                long = form.find("#lng"),
                location = results[0].geometry.location;

            console.log("processLocation", "success", query, results);

            lat.val(location.lat());
            long.val(location.lng());

            history.query = query;
            history.results = results;
            history.lat = lat.val();
            history.long = long.val();

            if (submit) {
                console.log("Submitting", lat.val(), long.val());
                form.submit();
            }
        }, function (query) {
            console.log("processLocation", "failure", query);
        });
    }

    // Only geocodes if the query has changed since last time.
    function geocode() {
        var geokeyword = $.trim($("#geokeyword").val()),
            loc = $.trim($("#loc").val()),
            // always use geokeyword in preference to loc (if provided)
            query = geokeyword || loc,
            dfd;

        // check for changes
        if (history.query === query) {
            console.log("No changes");
            dfd = $.Deferred();
            dfd.resolve(history.query, history.results);
            return dfd.promise();
        }

        return googleGeocode(query);
    }

    // Turn google.maps.Geocoder into promise API
    function googleGeocode(query) {
        var geocoder = new google.maps.Geocoder(),
            dfd = $.Deferred();

        geocoder.geocode({
            address: query
        }, function (results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                console.log("googleGeocode", "success", query, results);
                dfd.resolve(query, results);
 ...