Today I’m going to show you how you can add an autocomplete address search module on your website using Google Place API web service.
In our autocomplete address search module we have used a Jquery plugin named Select2, for type and search feature to our module.
Steps to implement an autocomplete address search module
The first step is to grab a google’s API Key, you can find it here.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
<select id="address" style="width:500px;"></select>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
var val = $("#address").val();
alert(val);
});
$('select').select2({
placeholder: "Search for your city",
ajax: {
url: function(params){
return 'api.php?data='+params.term;
},
dataType: 'json',
processResults: function (data) {
return {
results: $.map(data, function (item) {
return {
text: item.text,
id: item.text
}
})
};
}
}
});
});
</script>
</body>
</html>
api.php
<?php
$terms = $_GET['data'];
$data = file_get_contents("https://maps.googleapis.com/maps/api/place/autocomplete/json?input=".$terms."&types=geocode&key={YOUR_API_KEY}");
$arr = array();
$i=0;
foreach(json_decode($data)->predictions as $item){
$arr[$i] = array(
'id' => $i,
'text' => $item->description
);
$i++;
}
echo json_encode($arr);
?>
you just have to put above index.html and api.php in the same directory, and you replace {YOUR_API_KEY} with your’s one.
Important Note
By using google place API google simply needs some policy to follow (read this policy here), Google wants their “powered by Google” logo to be shown in the drop-down.
Note:- you need a live or local server to run this module.
To get latest updates please subscribe us and like our page, we are going to post lots of interesting stuff in future.
You may also like
Please help us by showing your reaction
I do agree with all the ideas you have presented on your post.
They are very convincing and can definitely work.
Nonetheless, the posts are too quick for starters.
May just you please prolong them a little from subsequent time?
Thanks for the post.
Many argue that the introduction of technology on the
making decisions process would completely eliminate any human error.
So, in ways gaming is a teenagers or anyone’s friend
as it entertains there young brains as long as they are
playing good games. The most advanced universal remotes may
even control approximately 15 different gadgets.
I like it… But actually you are not using the terms and Google logo here? I’m confused. Why you give to the world this code? If someone use this approach what will happen? Is there a payment agreement to google so not to show the logo, and be legiment to use their api?
you are absolutely right, no one supposed to use Google’s API without giving credit to them.
actually I’ve gave an “Important Note” which clearly says that you have to credit Google.
Thank you for valuable response @ChriStef, actually ‘m going to add a Powered by Google logo in the module so that my readers not have to worry about that.
Do I need to show Powered by Google logo if I use a payment account?
as per Google’s privacy policy, we didn’t find any solution for your request, but it did mention there that you can contact them (Google) directly and discuss about that.
My coder is trying to convince me to move to .net from PHP.
I have always disliked the idea because of the costs.
But he’s tryiong none the less. I’ve been using WordPress on numerous websites for
about a year and am concerned about switching to another platform.
I have heard great things about blogengine.net. Is there a way I can transfer all
my wordpress posts into it? Any kind of help would be greatly
appreciated!
Hi @Lottie,
may I know what platform you’re willing to transfer you current wordpress posts?
That’s really strange… The .Net engine blog asp seems very promising, but over the www the WordPress has been the top choice for all, with too many features.
You can try this approach to extract the content but this process is very hard even to switch to another WordPress, I cannot imagine how will be to another platform.
http://www.wpexplorer.com/migrating-wordpress-website/
Or try this plug in https://wordpress.org/plugins/duplicator/