Just add the following code to run google search location in your web page
[sourcecode language="javascript"]
function initialize()
{
var options = {types: ['(cities)'],componentRestrictions: {country: 'in'}};
source = new google.maps.places.Autocomplete((document.getElementById('source')),options);
google.maps.event.addListener(source, 'place_changed', function(e) {
$typeheaderr = document.getElementById("typeahead_err");
if($typeheaderr)
{
$typeheaderr.innerHTML = "";
}
var addobj = source.getPlace();
$("#sname").val(addobj.address_components[0].long_name);
$("#smap").val(addobj.url);
$("#slat").val(addobj.geometry.location.lat());
$("#slng").val(addobj.geometry.location.lng());
$("#sgref").val(addobj.reference);
if(typeof addobj.address_components[3] == 'undefined')
{
$("#scity").val(addobj.address_components[0].long_name);
$("#sdistrict").val(addobj.address_components[1].long_name);
$("#sstate").val(addobj.address_components[1].long_name);
$("#scountry").val(addobj.address_components[2].long_name);
}
else
{
$("#scity").val(addobj.address_components[0].long_name);
$("#sdistrict").val(addobj.address_components[1].long_name);
$("#sstate").val(addobj.address_components[2].long_name);
$("#scountry").val(addobj.address_components[3].long_name);
}
});
}
function keyback(evt,ty)//from
{
var keyCode = (evt.which) ? evt.which : evt.keyCode
if (keyCode == 8 || keyCode == 73)
{
if(ty=='S')
clearSource();
}
return true;
}
function clearSource()
{
$('#source').val('');
$('#sname').val('');
$('#smap').val('');
$('#slat').val('');
$('#slng').val('');
$('#sgref').val('');
$('#scountry').val('');
$('#sstate').val('');
$('#sdistrict').val('');
$('#scity').val('');
}
[/sourcecode]
then add google maps api javascript plugin into your web page
then,
simply add textboxes as
[sourcecode language="html"]
<input name="origion_place" id="source" class="form-control" placeholder="Location" autocomplete="off" oninvalid="this.setCustomValidity('Please enter origion place')" oninput="setCustomValidity('')" onkeypress="return keyback(event,'S');" type="text">
<input id="sname" name="sname" value="" type="hidden">
<input id="smap" name="smap" value="" type="hidden">
<input id="slat" name="slat" value="" type="hidden">
<input id="slng" name="slng" value="" type="hidden">
<input id="sgref" name="sgref" value="" type="hidden">
<input id="scountry" name="scountry" value="" type="hidden">
<input id="sstate" name="sstate" value="" type="hidden">
<input id="sdistrict" name="sdistrict" value="" type="hidden">
<input id="scity" name="scity" value="" type="hidden">
<span style="color:red;" id="typeahead_err"></span>
[/sourcecode]
Now its done
the output will be:
Comments
Post a Comment