JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true&libraries=places&.js"></script>
<form id="searchform">
<input class="kw" id="keyword" placeholder="Keyword"></input>
<input id="loc" placeholder="Location" type="text"></input>
<input type="submit" value="Search" id="search" disabled="disabled">
<input class="hidden" id="lat" disabled="true" placeholder="lat"></input>
<input class="hidden" id="lng" disabled="true" placeholder="lng"></input>
</form>
JavaScript
$(function () {
var input = $("#loc"),
lat = $("#lat"),
lng = $("#lng"),
search = $("#search"),
lastQuery = null,
autocomplete;
function processLocation(query) {
var query = $.trim(input.val()),
geocoder;
if (!query || query == lastQuery) {
console.log("Empty or same variable");
return;
}
lastQuery = query;
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());
search.removeAttr('disabled')
} else {
alert("We couldn't find this location. Please try an alternative");
}
});
}
autocomplete = new google.maps.places.Autocomplete(input[0], {
types: ["geocode"],
componentRestrictions: {
country: "uk"
}
});
google.maps.event.addListener(autocomplete, 'place_changed', processLocation);
/*$('#searchform').on('submit', function (event) {
processLocation();
event.preventDefault();
});*/
});