Google place autocomplete in Laravel with Multiple Input in one page

This article will show you how to implement Google place autocomplete in your Laravel application with Multiple Input in one page or multiple autocomplete in one page.

First, you need a Google API key to follow this instruction you may want to read Google documentation about this. Get API Key | Maps JavaScript API | Google Developers.

Second, of course you need to have a Laravel application and want to integrate this. If not you may want to check my other article Installation of Laravel.

Let's begin.

Copy this script tag inside your <head> tag, this will get the javascript need for your google map autocomplete. Take note to change YOUR_API_KEY in your own API Key.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=activatePlacesSearch" async defer></script>

After adding the google api javascript in our <head> tag, we need to send a function on that file. Add this script also inside of your <head> tag.

<script type="text/javascript">
    var place;

    function activatePlacesSearch(){
        var inputs = document.getElementsByClassName('location');

        var options = {
            types: ['(cities)'],
            componentRestrictions: {
                country: 'ph'
            }
        };

        var autocompletes = [];

        for (var i = 0; i < inputs.length; i++) {
            var autocomplete = new google.maps.places.Autocomplete(inputs[i], options);
            autocomplete.inputId = inputs[i].id;
            google.maps.event.addListener(autocomplete, 'place_changed', function(inputs) {
                place = autocomplete.getPlace();

                return false;
            });
            autocompletes.push(autocomplete);
        }
    }
</script>

Notice the callback keyword in Google api javascript? It will call activatePlacesSearch function of your javascript after the javascript successfully loaded on your page.

After that, we need a multiple <input> tag in our page, so put this inside the <body> tag.

<input type="text" class="location">
<input type="text" class="location">
<input type="text" class="location">

I'll explain how this works. First, I added a class for all of our inputs which is location and then we retrieve them via document.getElementsByClassName('location') and store it in an array of inputs. After storing it, I just do a for loop for all of the input that has class name of location and calls the google maps places autocomplete for each input.

And we're done, this is how you integrate a Multiple Google Place Autocomplete in one page, if you have any questions or comments feel free to drop it down.

Comments

Post a Comment