Adding google search location in web page

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:




abe750e3-6122-440f-817d-de619a3fd4c4

Comments

Popular posts from this blog

Simple Mail Sending Contact Form using PHP and Jquery

Codeigniter with Admin LTE

onclick anchor tag open url in bootstrap model