my-programming-tutorials-logo

My Programming Tutorials

Autocomplete Address Search Module Using Google API and PHP

Last updated on by , 9 comments

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.

SEE DEMO HERE

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

Autocomplete Address Search Module Using Google API and PHP
5 (100%) 1 vote

9 Responses
  1. 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.

  2. cheap says:

    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.

  3. ChriStef says:

    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?

    • Paritosh Pandey says:

      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.

    • Alex says:

      Do I need to show Powered by Google logo if I use a payment account?

      • Paritosh Pandey says:

        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.

  4. Lottie says:

    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!

  5. ChriStef says:

    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/

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.