JavaScript Auto complete function for Google

JavaScript Auto complete function for Google

  

Hi there,

I am trying to accomplish the same function as this simple html does, but can't seem to insert the right script in the right place, I might be missing something small.  

Thanks


Hi Tjaart,

Could you please give more feedback or describe in detail what are you are trying to achieve?


Hi Daniel,

I am trying to achieve the following:

The code for this action look like this;

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    </head>
    <body>
        <input type="text" id="address" style="width: 500px;"></input>

        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
        <script>
            var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});

            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                var place = autocomplete.getPlace();
                console.log(place.address_components);
            });
        </script>
    </body>
</html>



Solution

Hi Tjaart

You can do it like this:

  • Add an input widget
  • Assign a variable to it
  • Give the name "Address" to the input widget (to be later used in the script below)
  • Add this xy Expression after the input widget with the Escape Content set to No:
"<script type=""text/javascript"" src=""https://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU""></script>
<script>
            var autocomplete = new google.maps.places.Autocomplete($('#" + Address.Id + "')[0], {});

            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                var place = autocomplete.getPlace();
                console.log(place.address_components);
            });
</script>"

That should do it.

Cheers,

José

Solution

Worked first time, thanks so much...now, off to the next issue   

Just wanted to say Thanks for this. Amazing 

José Costa wrote:

Hi Tjaart

You can do it like this:

  • Add an input widget
  • Assign a variable to it
  • Give the name "Address" to the input widget (to be later used in the script below)
  • Add this xy Expression after the input widget with the Escape Content set to No:
"<script type=""text/javascript"" src=""https://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU""></script>
<script>
            var autocomplete = new google.maps.places.Autocomplete($('#" + Address.Id + "')[0], {});

            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                var place = autocomplete.getPlace();
                console.log(place.address_components);
            });
</script>"

That should do it.

Cheers,

José

Hi Jose,

I've been using this script you put in place for my development. It's been working great but suddenly stopped providing auto complete suggestions today. Is there any idea on why this might happen ?


Hi Christopher,

Not sure why it stopped working. It should still work.

Can you share your implementation to check it?

Cheers,

José