[Tutorial] Use AutoComplete class in Google Maps API for Automatic Address Filling.

foreign [Music] welcome to my data studio in this video we are going to continue learning how to use Google Maps API so in this video we're going to learn how to use Google Maps autocomplete function we'll learn how to add it to the current website and how to put a marker and data window to this new address okay let's go welcome to the second part of using Google Maps API on your website so last time we successfully run our application so we can show the map on our website successfully now this time we're going to add some more elements to our website for example uh we're going to try to add a search a box where you can use the autocomplete function of the Google Maps API so in order to do that you first need to enable the places apis it's a separated libraries from the Google Maps JavaScript apis so in your HTML file in the script tag you need to add a lot and the libraries equals to places in here and the rest Remains the Same okay um if you are not familiar with how to do autocomplete because it's quite I would say quite smart uh with autocomplete we don't have to type in the whole address anymore it's really spoiling us so you can go to the solution library of Google Maps platform and you can see its example and it's a simplified codes to get an idea of how to use it and what it would look like if you type in certain keywords here and you can select where you want to go and also I believe it's code also allows you to kind of like set a boundary of your search so that you will not search out of bound sometimes you're in the USA but then you search something from Canada uh that's just too far away okay so anyway so now we let's see how to add auto complete to our to our website so here we already have our init map function which is the Callback function so we do not move that so in our HTML file we first need to create an area where we will have the autocomplete function for example let's add um a part here let's call it uh auto complete and inside here we have a input box where we call the search box uh type is text Place her order please of course you can also put in a button okay let's add some um station to it see how it looks right now yeah we'll have the little box where we can look for the place okay now let's use this little info box to find and auto complete the places that you want to go to so I will try not to disturb our init map function to make it more concise uh we're gonna add another function let me call that function auto complete okay so in here we're going to create a function um called auto complete and let's uh in here we need to create an object that would do the autocomplete connected to the libraries and use the function so in here we are going to Define that function we're going to define the object so to complete this I mean meet uh where do we want to use this autocomplete function we are going to do use it on element by ID or to complete yep it's where we're going to use it and let's try to bind it to the map that we have here so that after complete it would uh it will show on the map and now uh let's try to create a auto a marker that would mark this new search position it's called Auto marker [Music] I need to put it on the map but also need to put it somewhere but right now we don't know so we can pass in this uh function is uh put it somewhere like a point on the map with its um coordination on the map all right so now we need to add a listener so where the autocomplete magic happens so uh so Google Maps has provided several like events that we can identify and provide a function to uh where we when the user do something there so we just use those keywords and those events uh it was simplify how we defined our users Behavior so once the place uh changed a place changed means that when a user selects an address in the drop down list that that usually pops up it's going to uh do something so what is it going to do let's do this first we need to make the marker invisible set visible yep so that we can you know change location without anybody noticing anything and now the user has selected a place so let's get it out of this um black box it's scary please use this function to get the place uh we will get the search the position out of this place so position space Geo metric dot location so now we have the location we're going to put the marker on the location I'll also need to show that location on on the map but we also need to write like kind of like an exception function so we need to make sure that this place is demonstratable so it's not geometry or like this like we try to make sure that this places have like valid this place have like this place has valid that value that we can use when okay so sorry yeah I will try to do this say no infra information found for for places like else so if this location is legit uh if at least your record like kind of like if we can view it make the maps fit step around put it past the viewport to the map if not so we put the location to to the map Center and we zoom in and after this we put a marker on the position so show the marker uh let's try to do something more later okay now let's try to load it for example let's go to my location uh yes I'll let you it's fine supermarket oh but there's nothing shown let's see what's the problem here I think there's some typo here you should do with your uh something wrong with the code so it says that some of the name has been used uh on correctly so let's have a look at uh if some of those stuff oh yeah so we put in a ram ID so let me switch that so that it's more it's easier to understand [Music] yeah it seems to not work let's go to my location first right it finds me now let's look for a grocery store like Whole Food Okay now click that and now we go to the Whole Food Market um now let's try to add some Gadget to this um to this autocomplete for example I will already provide about the marker let's try to provide a info window foreign so this is a fairly interesting object that we can use to pass in some information that you want to demonstrate on this map and probably from other platform so for example let me create a content let's create contents um name yeah let's just do that let's set it the account info Windows content to this info content and we open the info window on the marker let's go to allocation and let's look for Giant Eagle I think let's go to this one hey Giant Eagle nice cool if you want to see more code example you can always go to solution libraries like I have shared before and I hope you enjoy learning with this video and if you wanted to try some more functions uh welcome to follow me and subscribe and your encouragement is my greatest motivation thank you and see you next time [Music]

Channel: Jaselin Zeng

Views: 732

Keywords:

Id: -_DcWtEYdXU

Length: 13min 2sec (782 seconds)

Published: Thu Mar 23 2023