Tutorial - How to use Google Places API Autocomplete Library in your forms

if you've done any browsing on the internet you've probably come across one of these forms where there's autocomplete suggestions as you type in your address so for example on this page if I type in San Diego I'll get these two suggestions here now I really like this because it does a couple of things first it reduces typos from the user and putting their their address and then secondly it's just a much faster experience for the user to fill out the form so in this video I'm going to show you how to set that up using the Google Places API autocomplete Library so if we head over to the documentation you'll notice down here that we're going to need an API key so let's go over to Google type in console Google and click on this result right here so we're going to create a new project so in this drop down you can see the different projects that I have set up already so up here I'm going to select new project and then I'll give this the name of let's say Google Places demo you can assign your project to an organization or folder and then click on create okay our project has been finished creating so let's select the project up here and next we want to create that API key so let's go over here to the navigation menu and let's go over to apis and services and next we need to enable the apis that we need so for our case we're going to use the places API let's go ahead and enable it right here and this is going to be the API key that I'm going to be using for this demo so go ahead and copy it and let's go back to the Google Maps platform because I want to show you how to restrict that API key from only showing on your website or whatever property that that you want and not on any other domain so here here we are on select restriction type and let's go with websites and here you're going to enter the domain along with a little regular expression to capture things like subdomains and also things like the page URL or the page path after like the.com forward slash so in my example I'm going to be using a service called swipe pages and this is the URL that I'm going to be using so I'm going to go ahead and copy this URL and then go back to the Restriction page here so I'm going to paste in the URL in here and in your case you're probably going to do something like this where you just get rid of this and enter in the asterisk and then after this forward slash you'll replace that with the asterisk again so this is going to capture everything like www dot whatever or maybe like a subdomain with your with your domain.net and all pages that come with your domain or your subdomain so for this example I'll keep it like this this is a demo so I'm just going to delete this API key eventually so let's go ahead and just go with that and then restrict your key all right great so we set up our API key now the next thing that we need to do is to go into our web page or website builder and insert the library to then access the Google Places autocomplete Library so as I mentioned earlier I'm using a Lenny page builder called swipe pages and in this case if you're following along with swipe Pages you'll go over to over to the settings and then go over to tracking codes and here's where you can access your script so if you're hard coding you would just go over to your head element and then input the script as you can see here this is the places library that we're going to be pulling and for this placeholder API key you're going to then paste in the the key that you just created in the previous step the next step is to head over to the body end or otherwise known as the closing body tag and then copy and paste the script so one key distinction that I want to make here is the query selector depending on how you are building your website you're going to do this a little bit differently so in my case I just want to re-emphasize that I'm using a landing pagemaker and um I am unable to insert the ID in the input field within the form that's why Pages allows you to access the CSS ID for the form element but not for the input element within the form so a workaround for this situation is to to identify the input and then the attribute name to then make that my search input so let me show you what that looks like if we open open up the dev console and then click on into this input field you can see the input element and then the attribute of name equals search input so this is created by swipe pages and I'm just simply using what they're using you know out of the box to then Target this input element but in the best case scenario you can just simply access this input and then and then put in your ID like this okay so let's go back to the code one other thing that I want to call out here is that you can put other attributes in your code like component restrictions which could be pretty handy if you just want a select a particular country where you want to limit your suggestions and if you want a full list of what that looks like of all the different options that you have available head over to the dev docs and you can see all the all of the different attributes and options that you have available alright so next we want to save this and then publish this and one thing to note here is this might take a minute or so for swipe Pages it should be instant if you're hard coding your site but I've noticed that it takes a little bit of time in order for the changes to actually go through I'm not sure if it's a caching error or something like that a caching issue but something to keep in mind so if we head over to the form let's just do a quick demo let me close this out so I'll put in my name and then put in San Diego and you'll see the suggestions come up all right that's it for this video I hope you found this helpful and if you have any feedback or maybe there's a an easier way to do this I would definitely want to get your thoughts on that and please share that with the group in the comments below

Channel: Nefer Lopez

Views: 11,090

Keywords: google places api, autocomplete library, tutorial, how to, form, autosuggestions, autocomplete

Id: qpUfj4zPxWQ

Length: 7min 9sec (429 seconds)

Published: Sat Mar 04 2023