Autocomplete Address Search Module Using Google API and PHP

Last updated on August 31st, 2017 by Paritosh Pandey


Today I’m going to show you how you can add an autocomplete address search module in your website using Google Place API web service.

In our autocomplete address search module we have used a Jquery plugin named Select2, for giving type and search feature to our module.

Steps to implement an autocomplete address search module

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

 header("Access-Control-Allow-Origin");

 $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 a same directory, and you replac {YOUR_API_KEY} with your’s one.

Important Note

By using google place api google simply needs some policy to be follow (read this policy here), google wants their “powered by google” logo to be shown in the dropdown.

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 stuffs in future.

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *