title
Google Geocode API & JavaScript Tutorial
description
In this video we will be working with the Google geocoding API to get all location info including latitude and longitude from an address or even from just the name of a city or state. We will build an application with a Bootstrap 4 form to interact with the API.
CODE: Code for this video
http://www.traversymedia.com/downloads/mygeocode.zip
Google Map API Tutorial:
https://www.youtube.com/watch?v=Zxf1mnP5zcw
SPONSORS:
DevMountain Bootcamp - https://goo.gl/6q0dEa
SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support:
http://www.paypal.me/traversymedia
http://www.patreon.com/traversymedia
FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
http://www.twitter.com/traversymedia
http://www.linkedin.com/in/bradtraversy
detail
{'title': 'Google Geocode API & JavaScript Tutorial', 'heatmap': [{'end': 125.439, 'start': 77.585, 'weight': 0.879}, {'end': 752.703, 'start': 704.221, 'weight': 0.713}], 'summary': 'Tutorial covers setting up google maps geocoding api, creating a geocode app structure, extracting address components using javascript, and displaying address data on a web page, with a focus on using axios for geocoding and address formatting, and integrating dynamic map marker placement based on city names.', 'chapters': [{'end': 210.471, 'segs': [{'end': 54.921, 'src': 'embed', 'start': 28.574, 'weight': 0, 'content': [{'end': 34.796, 'text': 'the country, the county basically all of any address info or any location info associated with that address.', 'start': 28.574, 'duration': 6.222}, {'end': 37.036, 'text': "Alright, so that's what we'll be doing in this video.", 'start': 35.316, 'duration': 1.72}, {'end': 37.816, 'text': "Let's get started.", 'start': 37.056, 'duration': 0.76}, {'end': 41.077, 'text': 'This video is sponsored by DevMountain.', 'start': 38.817, 'duration': 2.26}, {'end': 45.358, 'text': "If you're interested in learning web development, iOS or UX design,", 'start': 41.197, 'duration': 4.161}, {'end': 50.96, 'text': 'DevMountain is a 12-week design and development boot camp intended to get you a full-time job in the industry.', 'start': 45.358, 'duration': 5.602}, {'end': 54.921, 'text': 'To learn more, visit devmountain.com or click the link in the description below.', 'start': 51.3, 'duration': 3.621}], 'summary': 'Devmountain offers 12-week design and development boot camp for web development, ios, and ux design.', 'duration': 26.347, 'max_score': 28.574, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pRiQeo17u6c/pics/pRiQeo17u6c28574.jpg'}, {'end': 125.439, 'src': 'heatmap', 'start': 77.585, 'weight': 0.879, 'content': [{'end': 83.567, 'text': "And in this case, you're looking up 1600 Amphitheater Parkway, Mountain View, California.", 'start': 77.585, 'duration': 5.982}, {'end': 86.068, 'text': 'And then you need to attach your API key.', 'start': 83.687, 'duration': 2.381}, {'end': 87.909, 'text': "So let's go ahead and create that first.", 'start': 86.088, 'duration': 1.821}, {'end': 92.07, 'text': 'So you need to go to console.developers.google.com.', 'start': 88.609, 'duration': 3.461}, {'end': 93.791, 'text': 'And you need to have a project.', 'start': 92.65, 'duration': 1.141}, {'end': 95.692, 'text': 'I already have one called Test Project.', 'start': 93.811, 'duration': 1.881}, {'end': 96.752, 'text': 'And I have that selected.', 'start': 95.772, 'duration': 0.98}, {'end': 99.323, 'text': "And then I'm going to say Enable API.", 'start': 97.341, 'duration': 1.982}, {'end': 103.847, 'text': "And we're going to want to go to Google Maps APIs and then click More.", 'start': 100.024, 'duration': 3.823}, {'end': 106.77, 'text': "And you'll see that there's a geocoding API.", 'start': 104.248, 'duration': 2.522}, {'end': 107.991, 'text': 'So we want to click on that.', 'start': 106.85, 'duration': 1.141}, {'end': 110.594, 'text': 'And then we just want to enable it.', 'start': 109.293, 'duration': 1.301}, {'end': 116.529, 'text': 'and then, once we do that, we should be able to get our credentials.', 'start': 113.726, 'duration': 2.803}, {'end': 125.439, 'text': "so let's say create credentials and we want to, let's see, let's click that and then it should give us an api key right here.", 'start': 116.529, 'duration': 8.91}], 'summary': 'Setting up geocoding api with 1600 amphitheater parkway, mountain view, california, and obtaining an api key.', 'duration': 47.854, 'max_score': 77.585, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pRiQeo17u6c/pics/pRiQeo17u6c77585.jpg'}, {'end': 191.258, 'src': 'embed', 'start': 164.434, 'weight': 3, 'content': [{'end': 168.436, 'text': "You just want to install that I'm also going to be using Adam live server.", 'start': 164.434, 'duration': 4.002}, {'end': 178.181, 'text': "So let's search for Adam live server And click packages, and it's the this one here by jazz Chen.", 'start': 169.056, 'duration': 9.125}, {'end': 185.792, 'text': "Okay, and that's just going to allow us to open that HTML file on our localhost, on a certain, on a specific port, and All right.", 'start': 178.181, 'duration': 7.611}, {'end': 187.014, 'text': "So let's go ahead.", 'start': 185.953, 'duration': 1.061}, {'end': 191.258, 'text': "And while I have this open, I'm going to go to packages, Adam live server.", 'start': 187.294, 'duration': 3.964}], 'summary': 'Installing adam live server for opening html file on localhost.', 'duration': 26.824, 'max_score': 164.434, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pRiQeo17u6c/pics/pRiQeo17u6c164434.jpg'}], 'start': 7.492, 'title': 'Geocoding api setup', 'summary': 'Covers the basics of the geocoding api, enabling users to retrieve location details like latitude, longitude, country, and county. it also discusses setting up google maps geocoding api, creating an api key, and configuring an html file for api usage.', 'chapters': [{'end': 66.789, 'start': 7.492, 'title': 'Geocoding api basics', 'summary': 'Discusses the basics of the geocoding api, which allows users to retrieve location information such as latitude, longitude, country, and county from a street address by sending a request to the api. additionally, it mentions the sponsorship by devmountain for web development, ios, and ux design boot camp.', 'duration': 59.297, 'highlights': ['The geocoding API allows us to retrieve latitude, longitude, country, county and other location information from a street address by sending a request to the API.', 'DevMountain sponsors a 12-week design and development boot camp to assist individuals in obtaining a full-time job in the industry.']}, {'end': 210.471, 'start': 67.641, 'title': 'Setting up google maps geocoding api', 'summary': 'Covers setting up google maps geocoding api, including creating an api key and setting up a basic html file for utilizing the api.', 'duration': 142.83, 'highlights': ['The URL for making the request to the Google Maps API Geocode is Maps API Geocode/JSON, with the address parameter 1600 Amphitheater Parkway, Mountain View, California.', 'The process involves creating a project in the Google Developers Console, enabling the Geocoding API, and obtaining the API key.', 'Setting up a basic HTML file and utilizing tools like Atom text editor and Emmet for easier HTML tag generation is demonstrated.']}], 'duration': 202.979, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pRiQeo17u6c/pics/pRiQeo17u6c7492.jpg', 'highlights': ['The geocoding API allows us to retrieve latitude, longitude, country, and county from a street address.', 'The process involves creating a project in the Google Developers Console, enabling the Geocoding API, and obtaining the API key.', 'The URL for making the request to the Google Maps API Geocode is Maps API Geocode/JSON, with the address parameter 1600 Amphitheater Parkway, Mountain View, California.', 'Setting up a basic HTML file and utilizing tools like Atom text editor and Emmet for easier HTML tag generation is demonstrated.']}, {'end': 541.186, 'segs': [{'end': 290.452, 'src': 'embed', 'start': 210.471, 'weight': 3, 'content': [{'end': 216.133, 'text': "so just exclamation tab, and it's going to give us our doc type, our head body tags, all that stuff.", 'start': 210.471, 'duration': 5.662}, {'end': 223.876, 'text': "And then in the title, let's just say, I will say my geocode app.", 'start': 216.653, 'duration': 7.223}, {'end': 225.849, 'text': 'All right.', 'start': 225.509, 'duration': 0.34}, {'end': 233.279, 'text': "And then let's see, we're going to want to, uh, let's, I'm actually going to open up the documentation again.", 'start': 226.67, 'duration': 6.609}, {'end': 234.821, 'text': "Let's see.", 'start': 233.299, 'duration': 1.522}, {'end': 237.364, 'text': 'I have a ton of stuff open here.', 'start': 234.861, 'duration': 2.503}, {'end': 239.346, 'text': 'Here we go.', 'start': 238.966, 'duration': 0.38}, {'end': 240.808, 'text': 'All right.', 'start': 240.528, 'duration': 0.28}, {'end': 245.648, 'text': "So before we get into our actual project, let's take a look at our response.", 'start': 241.687, 'duration': 3.961}, {'end': 251.789, 'text': "So, if we send a request to this right here, it's going to give us something that looks like this,", 'start': 245.728, 'duration': 6.061}, {'end': 256.05, 'text': 'which is a results array that has an address components array.', 'start': 251.789, 'duration': 4.261}, {'end': 261.93, 'text': 'And if we look in here, we have a bunch of different objects.', 'start': 256.07, 'duration': 5.86}, {'end': 266.272, 'text': 'And each one has a long name, a short name, and then types.', 'start': 262.591, 'duration': 3.681}, {'end': 270.335, 'text': "Now types is just that, it's the type of component.", 'start': 267.252, 'duration': 3.083}, {'end': 277.221, 'text': 'For instance, this is the street number type, which is also in an array because some have more than one type.', 'start': 270.355, 'duration': 6.866}, {'end': 281.004, 'text': "Then we have a short name and a long name, and in some cases they're the same.", 'start': 277.241, 'duration': 3.763}, {'end': 284.447, 'text': "There's no short way to say 1600.", 'start': 281.444, 'duration': 3.003}, {'end': 285.828, 'text': "So that's the street number.", 'start': 284.447, 'duration': 1.381}, {'end': 290.452, 'text': 'If you look here, we have the route type, which is actually the street name.', 'start': 285.888, 'duration': 4.564}], 'summary': 'Setting up document structure and analyzing response data for geocode app.', 'duration': 79.981, 'max_score': 210.471, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pRiQeo17u6c/pics/pRiQeo17u6c210471.jpg'}, {'end': 494.093, 'src': 'embed', 'start': 403.399, 'weight': 0, 'content': [{'end': 416.158, 'text': "we're going to need our api key, so we'll grab that and whoops, just go ahead and replace that and let's say send,", 'start': 403.399, 'duration': 12.759}, {'end': 424.905, 'text': "and you'll see that we get a response that looks very similar to the documentation response formatted address geometry, address components.", 'start': 416.158, 'duration': 8.747}, {'end': 428.268, 'text': 'so we want to mimic this same thing in our javascript.', 'start': 424.905, 'duration': 3.363}, {'end': 429.849, 'text': "now, this isn't this.", 'start': 428.268, 'duration': 1.581}, {'end': 432.071, 'text': 'api is not dedicated to javascript.', 'start': 429.849, 'duration': 2.222}, {'end': 437.275, 'text': 'you can, you could use any language or any framework, as long as you can make http requests.', 'start': 432.071, 'duration': 5.204}, {'end': 444.821, 'text': 'you could use django or php frameworks, laravel, anything that you can make a request with.', 'start': 437.275, 'duration': 7.546}, {'end': 451.205, 'text': "now, as far as making the request through our application, we're going to use something called axios.", 'start': 444.821, 'duration': 6.384}, {'end': 452.767, 'text': "okay, now, you don't have to use this.", 'start': 451.205, 'duration': 1.562}, {'end': 459.812, 'text': 'you could use, you know, standard javascript, which is kind of long and drawn out to make an ajax request.', 'start': 452.767, 'duration': 7.045}, {'end': 461.333, 'text': 'you could use es6 promises.', 'start': 459.812, 'duration': 1.521}, {'end': 465.977, 'text': 'you could use jquery, but i think that this is one of the easier ways to do it.', 'start': 461.333, 'duration': 4.644}, {'end': 469.839, 'text': "okay, so, if we go down here, You can install it with NPM, but I don't want to do that.", 'start': 465.977, 'duration': 3.862}, {'end': 471.2, 'text': 'I want to keep this very basic.', 'start': 469.859, 'duration': 1.341}, {'end': 477.224, 'text': "We're just going to include the script tag and then we'll be able to say axios.get to make a get request.", 'start': 471.3, 'duration': 5.924}, {'end': 480.806, 'text': "put in that URL along with the address and we'll get a response.", 'start': 477.224, 'duration': 3.582}, {'end': 486.589, 'text': 'And then we can take that response, and we can format it so that we can insert it right into our web page.', 'start': 481.306, 'duration': 5.283}, {'end': 488.55, 'text': "So that's what we'll be doing.", 'start': 487.59, 'duration': 0.96}, {'end': 494.093, 'text': "So let's grab the script tag right here and go back to our application.", 'start': 489.191, 'duration': 4.902}], 'summary': 'Using axios for http requests, can be used with any language/framework, mimicking the documentation response format in javascript.', 'duration': 90.694, 'max_score': 403.399, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pRiQeo17u6c/pics/pRiQeo17u6c403399.jpg'}], 'start': 210.471, 'title': 'Geocode app development and using apis with javascript', 'summary': 'Covers setting up the basic structure for a geocode app, analyzing response structure, formatting addresses, obtaining latitude and longitude values, and making http requests with axios.', 'chapters': [{'end': 311.695, 'start': 210.471, 'title': 'Geocode app development', 'summary': 'Covers the process of setting up the basic structure for a geocode app and analyzing the response structure, which consists of results array with address components including types, long names, and short names.', 'duration': 101.224, 'highlights': ['The response structure consists of a results array with address components, including types, long names, and short names.', 'The address components array contains different objects, each with a long name, short name, and types.', 'The types within the address components represent different components such as street number, street name, city, and county name.']}, {'end': 541.186, 'start': 312.555, 'title': 'Using apis and geo coding with javascript', 'summary': 'Discusses using apis and geo coding with javascript, including details on formatting addresses, obtaining latitude and longitude values, and making http requests with axios.', 'duration': 228.631, 'highlights': ['Obtaining complete formatted addresses, including state, zip code, and country, from a partial address search like 1600 Amphitheater Parkway, Mountain View. Complete address including state, zip code, and country.', 'Using the geometry feature to retrieve latitude and longitude values for location information. Latitude and longitude values for a location.', 'Demonstrating the use of Postman for making HTTP requests and obtaining responses from the API. Using Postman for API requests and response retrieval.', 'Introducing axios as a convenient method for making HTTP requests in JavaScript. Axios as a user-friendly tool for making HTTP requests.', 'Including Bootstrap 4 and utilizing its components like list group, cards, and forms in the web application. Incorporating Bootstrap 4 components such as list group, cards, and forms.']}], 'duration': 330.715, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pRiQeo17u6c/pics/pRiQeo17u6c210471.jpg', 'highlights': ['Covers setting up the basic structure for a geocode app, analyzing response structure, formatting addresses, obtaining latitude and longitude values, and making http requests with axios.', 'Obtaining complete formatted addresses, including state, zip code, and country, from a partial address search like 1600 Amphitheater Parkway, Mountain View. Complete address including state, zip code, and country.', 'Using the geometry feature to retrieve latitude and longitude values for location information. Latitude and longitude values for a location.', 'Demonstrating the use of Postman for making HTTP requests and obtaining responses from the API. Using Postman for API requests and response retrieval.', 'Introducing axios as a convenient method for making HTTP requests in JavaScript. Axios as a user-friendly tool for making HTTP requests.', 'Including Bootstrap 4 and utilizing its components like list group, cards, and forms in the web application. Incorporating Bootstrap 4 components such as list group, cards, and forms.', 'The response structure consists of a results array with address components, including types, long names, and short names.', 'The address components array contains different objects, each with a long name, short name, and types.', 'The types within the address components represent different components such as street number, street name, city, and county name.']}, {'end': 793.148, 'segs': [{'end': 571.171, 'src': 'embed', 'start': 541.246, 'weight': 0, 'content': [{'end': 545.188, 'text': "We'll hard code the location and make sure that everything comes back okay.", 'start': 541.246, 'duration': 3.942}, {'end': 548.21, 'text': "So let's go ahead and put in our script tags at the bottom.", 'start': 545.248, 'duration': 2.962}, {'end': 550.585, 'text': 'All right.', 'start': 550.365, 'duration': 0.22}, {'end': 556.787, 'text': "And we're going to create a function here called Geocode.", 'start': 550.945, 'duration': 5.842}, {'end': 558.347, 'text': "Okay And I'm just calling it that.", 'start': 556.807, 'duration': 1.54}, {'end': 559.568, 'text': "You can call it whatever you'd like.", 'start': 558.387, 'duration': 1.181}, {'end': 562.488, 'text': "And then from here, we're going to make our request.", 'start': 560.208, 'duration': 2.28}, {'end': 563.649, 'text': 'All right.', 'start': 563.369, 'duration': 0.28}, {'end': 565.049, 'text': "So we're going to use Axios.", 'start': 563.689, 'duration': 1.36}, {'end': 571.171, 'text': 'So since we included that script tag, we can just use Axios and we can say .get.', 'start': 565.609, 'duration': 5.562}], 'summary': 'Creating a function geocode to make a request using axios', 'duration': 29.925, 'max_score': 541.246, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pRiQeo17u6c/pics/pRiQeo17u6c541246.jpg'}, {'end': 752.703, 'src': 'heatmap', 'start': 661.456, 'weight': 1, 'content': [{'end': 664.738, 'text': "Let's copy that.", 'start': 661.456, 'duration': 3.282}, {'end': 670.002, 'text': "And we're going to put in key and then just paste that in.", 'start': 666.379, 'duration': 3.623}, {'end': 680, 'text': 'Okay, now what we want to do here is get rid of this semicolon and then just do dot then.', 'start': 672.637, 'duration': 7.363}, {'end': 686.403, 'text': 'Okay, and then this is going to take in a function that will give us the response from that request.', 'start': 680.02, 'duration': 6.383}, {'end': 688.183, 'text': 'So we just want to pass in response.', 'start': 686.483, 'duration': 1.7}, {'end': 691.565, 'text': "And then if there's an error, we can do dot catch.", 'start': 689.064, 'duration': 2.501}, {'end': 695.126, 'text': 'That will take in a function as well.', 'start': 693.446, 'duration': 1.68}, {'end': 697.527, 'text': 'That will take in an error if there is one.', 'start': 695.426, 'duration': 2.101}, {'end': 700.228, 'text': 'Okay, and you can handle that how you want.', 'start': 697.547, 'duration': 2.681}, {'end': 701.689, 'text': "I'm just going to console log it.", 'start': 700.248, 'duration': 1.441}, {'end': 708.942, 'text': "OK, and then for now, we're just going to console log our response to see what it gives us.", 'start': 704.221, 'duration': 4.721}, {'end': 722.186, 'text': "OK, now we just created the function, we haven't called it yet, so let's just go right above it and we'll say call geocode.", 'start': 713.023, 'duration': 9.163}, {'end': 729.827, 'text': "And let's go ahead and save it, and then I'm going to just open up the application.", 'start': 726.006, 'duration': 3.821}, {'end': 731.828, 'text': 'We just bring that over.', 'start': 729.847, 'duration': 1.981}, {'end': 740.013, 'text': "Okay and I'm going to open up the console here with F12 and you can already see that we got an object back.", 'start': 734.588, 'duration': 5.425}, {'end': 743.836, 'text': "So if we look at that what we're going to be concerned with here is data.", 'start': 740.173, 'duration': 3.663}, {'end': 746.318, 'text': 'So inside data we have the results.', 'start': 744.196, 'duration': 2.122}, {'end': 752.703, 'text': "Now results is an array and we're always going to get the first one which is going to be at 0.", 'start': 747.059, 'duration': 5.644}], 'summary': 'Developing a function to handle response and error, logging the response in a console.', 'duration': 60.73, 'max_score': 661.456, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pRiQeo17u6c/pics/pRiQeo17u6c661456.jpg'}], 'start': 541.246, 'title': 'Geocoding and address extraction', 'summary': 'Covers geocoding using axios, creating a function called geocode, setting up a geocoding function with an api key, and extracting address components using javascript. it emphasizes using axios .get method, handling errors, and extracting street number, street name, and neighborhood.', 'chapters': [{'end': 628.832, 'start': 541.246, 'title': 'Geocoding with axios', 'summary': 'Covers the process of geocoding using axios and creating a function called geocode, demonstrating the use of axios .get method and passing parameters for location, with an emphasis on obtaining and utilizing the url.', 'duration': 87.586, 'highlights': ['The chapter covers the process of geocoding using Axios and creating a function called Geocode.', 'Demonstrates the use of Axios .get method and passing parameters for location.', 'Emphasizes on obtaining and utilizing the URL for geocoding.']}, {'end': 722.186, 'start': 630.212, 'title': 'Geocoding function and api key setup', 'summary': 'Focuses on setting up a geocoding function to retrieve location data using an api key, and handling potential errors, with an emphasis on console logging the response for verification.', 'duration': 91.974, 'highlights': ['Setting up a geocoding function to retrieve location data using an API key The code demonstrates the process of creating a geocoding function and setting a hardcoded location, along with including an API key to retrieve location data.', 'Handling potential errors and console logging the response for verification The chapter emphasizes handling errors through the dot catch method and console logging the response for verification purposes.']}, {'end': 793.148, 'start': 726.006, 'title': 'Address component extraction', 'summary': 'Demonstrates how to extract address components from an object using javascript, including street number, street name, and neighborhood, with the example of 22 main street in charlestown.', 'duration': 67.142, 'highlights': ['The chapter shows how to extract address components like street number, street name, and neighborhood from an object using JavaScript.', 'The example of 22 Main Street in Charlestown is used to illustrate the extraction process.', "The process involves accessing the 'results' array and then the 'address components' array within it to retrieve the desired information."]}], 'duration': 251.902, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pRiQeo17u6c/pics/pRiQeo17u6c541246.jpg', 'highlights': ['Covers geocoding using Axios and creating a function called Geocode.', 'Setting up a geocoding function to retrieve location data using an API key.', 'Emphasizes using Axios .get method and handling errors.', 'Extracting address components like street number, street name, and neighborhood using JavaScript.']}, {'end': 1378.044, 'segs': [{'end': 850.989, 'src': 'embed', 'start': 820.392, 'weight': 4, 'content': [{'end': 823.713, 'text': "So let's put a comment here and we'll just say log.", 'start': 820.392, 'duration': 3.321}, {'end': 827.794, 'text': "We'll say log full response.", 'start': 824.713, 'duration': 3.081}, {'end': 834.277, 'text': "And then underneath that, we're going to start to format things.", 'start': 829.833, 'duration': 4.444}, {'end': 837.799, 'text': "So let's say format or formatted address.", 'start': 834.397, 'duration': 3.402}, {'end': 841.122, 'text': "So we're going to grab that.", 'start': 839.941, 'duration': 1.181}, {'end': 846.126, 'text': "Now I'm just going to console log to make sure we can get it correctly.", 'start': 841.222, 'duration': 4.904}, {'end': 848.207, 'text': "So what we'll do is take that response.", 'start': 846.226, 'duration': 1.981}, {'end': 850.989, 'text': "And then remember, we're going to look in data.", 'start': 849.328, 'duration': 1.661}], 'summary': 'Formatting and logging responses to retrieve data.', 'duration': 30.597, 'max_score': 820.392, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pRiQeo17u6c/pics/pRiQeo17u6c820392.jpg'}, {'end': 977.732, 'src': 'embed', 'start': 917.729, 'weight': 0, 'content': [{'end': 923.913, 'text': "And for that Now, instead of using single quotes, we're going to use backticks,", 'start': 917.729, 'duration': 6.184}, {'end': 927.796, 'text': 'because this allows us to create a template string and we can use multiple lines.', 'start': 923.913, 'duration': 3.883}, {'end': 935.641, 'text': "Now, for each area, the formatted address, the address components and the geometry, we're going to create a UL, a list group.", 'start': 928.436, 'duration': 7.205}, {'end': 936.481, 'text': 'All right.', 'start': 936.141, 'duration': 0.34}, {'end': 938.022, 'text': "So in here, let's say UL.", 'start': 936.561, 'duration': 1.461}, {'end': 942.485, 'text': 'Okay And this is a bootstrap class of list group.', 'start': 938.042, 'duration': 4.443}, {'end': 946.614, 'text': 'All right.', 'start': 946.294, 'duration': 0.32}, {'end': 952.357, 'text': "And then inside here, we'll have our ally tag and that'll have a class of list group item.", 'start': 946.694, 'duration': 5.663}, {'end': 964.063, 'text': 'OK, now the way that we can use variables inside a template string is with a money sign and then some curly braces.', 'start': 958.16, 'duration': 5.903}, {'end': 967.305, 'text': 'And all we want to put in here is that formatted address.', 'start': 964.503, 'duration': 2.802}, {'end': 969.526, 'text': 'All right.', 'start': 969.166, 'duration': 0.36}, {'end': 970.166, 'text': 'Just like that.', 'start': 969.586, 'duration': 0.58}, {'end': 973.068, 'text': 'So we have the output now down here.', 'start': 970.226, 'duration': 2.842}, {'end': 977.732, 'text': "We're going to actually output to app.", 'start': 975.711, 'duration': 2.021}], 'summary': 'Using backticks for template strings to create a ul list group for formatted address, address components, and geometry.', 'duration': 60.003, 'max_score': 917.729, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pRiQeo17u6c/pics/pRiQeo17u6c917729.jpg'}, {'end': 1155.796, 'src': 'embed', 'start': 1128.534, 'weight': 2, 'content': [{'end': 1134.155, 'text': "So let's start out by creating a variable called address components output.", 'start': 1128.534, 'duration': 5.621}, {'end': 1142.604, 'text': "And we're going to set that off by being just a UL with the class of list group.", 'start': 1135.395, 'duration': 7.209}, {'end': 1147.008, 'text': 'Okay, and then we want to loop through each one.', 'start': 1144.706, 'duration': 2.302}, {'end': 1153.434, 'text': "so we're going to use a for loop which takes in a variable, so variable i.", 'start': 1147.008, 'duration': 6.426}, {'end': 1155.796, 'text': "we're going to set that initially to zero.", 'start': 1153.434, 'duration': 2.362}], 'summary': "Creating a variable 'address components output' and looping through each item using a for loop.", 'duration': 27.262, 'max_score': 1128.534, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pRiQeo17u6c/pics/pRiQeo17u6c1128534.jpg'}], 'start': 794.628, 'title': 'Address data extraction and web page display', 'summary': 'Discusses extracting and formatting address data from a response, including latitude and longitude, to display on a web page, ensuring it matches the specified structure and retrieves the formatted address. it also explains outputting a formatted address and address components on a web page using javascript, including creating a template string, using variables inside a template string, and looping through address components to display each component on the page.', 'chapters': [{'end': 881.975, 'start': 794.628, 'title': 'Extracting and formatting address data', 'summary': 'Discusses extracting and formatting address data from a response, including the latitude and longitude, to display it on a web page, ensuring it matches the specified structure and successfully retrieves the formatted address.', 'duration': 87.347, 'highlights': ['The chapter demonstrates extracting formatted address and geometry data, including latitude and longitude, from a response to be displayed on a web page.', "It explains the process of structuring the response data, specifically accessing the 'formatted address' within the array of results, to ensure correct retrieval and display.", 'The speaker emphasizes the importance of matching the specified structure to successfully obtain and present the exact formatted address.']}, {'end': 1378.044, 'start': 883.148, 'title': 'Outputting formatted address on web page', 'summary': 'Explains how to output a formatted address and address components on a web page using javascript, including creating a template string, using variables inside a template string, and looping through address components to display each component on the page.', 'duration': 494.896, 'highlights': ['Creating a template string and using variables inside it to output formatted address on web page. The speaker explains the use of backticks to create a template string and using variables inside it to output the formatted address on the web page.', 'Looping through address components to display each component on the web page. The chapter describes the use of a for loop to iterate through the address components and add each component to a list item for display on the web page.', "Using the 'document.getElementById' method to update the web page with the formatted address and address components. The speaker demonstrates the use of 'document.getElementById' method to update the web page with the formatted address and address components output."]}], 'duration': 583.416, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pRiQeo17u6c/pics/pRiQeo17u6c794628.jpg', 'highlights': ['The chapter demonstrates extracting formatted address and geometry data, including latitude and longitude, from a response to be displayed on a web page.', 'The speaker emphasizes the importance of matching the specified structure to successfully obtain and present the exact formatted address.', 'Creating a template string and using variables inside it to output formatted address on web page. The speaker explains the use of backticks to create a template string and using variables inside it to output the formatted address on the web page.', "Using the 'document.getElementById' method to update the web page with the formatted address and address components. The speaker demonstrates the use of 'document.getElementById' method to update the web page with the formatted address and address components output.", 'Looping through address components to display each component on the web page. The chapter describes the use of a for loop to iterate through the address components and add each component to a list item for display on the web page.', "It explains the process of structuring the response data, specifically accessing the 'formatted address' within the array of results, to ensure correct retrieval and display."]}, {'end': 1965.858, 'segs': [{'end': 1403.886, 'src': 'embed', 'start': 1378.064, 'weight': 2, 'content': [{'end': 1382.646, 'text': 'We have the type as the kind of the key, I guess, and then the value as the value.', 'start': 1378.064, 'duration': 4.582}, {'end': 1384.047, 'text': 'All right.', 'start': 1382.666, 'duration': 1.381}, {'end': 1392.702, 'text': "And no matter no matter what it's going to, even if there's no, for instance, if there's no neighborhood, if we just put Boston Mass,", 'start': 1385.399, 'duration': 7.303}, {'end': 1394.983, 'text': "if there's no neighborhood, it's just not going to show up here.", 'start': 1392.702, 'duration': 2.281}, {'end': 1398.624, 'text': "OK, because it's looping through and it's only going to output what it finds.", 'start': 1395.123, 'duration': 3.501}, {'end': 1403.886, 'text': "So let's go back and let's see.", 'start': 1400.265, 'duration': 3.621}], 'summary': 'Discussion about data types and values, with emphasis on output limitations.', 'duration': 25.822, 'max_score': 1378.064, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pRiQeo17u6c/pics/pRiQeo17u6c1378064.jpg'}, {'end': 1701.821, 'src': 'embed', 'start': 1670.852, 'weight': 0, 'content': [{'end': 1683.675, 'text': "Let's also put a class in here and we're going to give it a bootstrap class of form control and then also form control, dash LG,", 'start': 1670.852, 'duration': 12.823}, {'end': 1685.135, 'text': 'and then we just need our button.', 'start': 1683.675, 'duration': 1.46}, {'end': 1691.858, 'text': "so I'm gonna put a line break and then we'll put in our button and let's give that button an ID.", 'start': 1685.135, 'duration': 6.723}, {'end': 1695.099, 'text': "let's see an ID.", 'start': 1691.858, 'duration': 3.241}, {'end': 1701.821, 'text': "actually it doesn't need an ID, so let's just say submit.", 'start': 1695.099, 'duration': 6.722}], 'summary': "Adding a class to a form and creating a button with id 'submit' in bootstrap.", 'duration': 30.969, 'max_score': 1670.852, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pRiQeo17u6c/pics/pRiQeo17u6c1670852.jpg'}, {'end': 1847.667, 'src': 'embed', 'start': 1811.883, 'weight': 3, 'content': [{'end': 1827.072, 'text': "So to do that, we can pass in an event parameter to geocode and then we can let's say prevent actual submit and we can just do E dot prevent default.", 'start': 1811.883, 'duration': 15.189}, {'end': 1835.519, 'text': "OK, so let's save that.", 'start': 1834.238, 'duration': 1.281}, {'end': 1837.8, 'text': 'And now when we click submit, it works.', 'start': 1835.599, 'duration': 2.201}, {'end': 1840.742, 'text': "Now it's always getting Boston, so we want to change that.", 'start': 1837.84, 'duration': 2.902}, {'end': 1847.667, 'text': "So what we'll do is we're going to catch what's submitted in that input box.", 'start': 1841.903, 'duration': 5.764}], 'summary': 'Using event parameter to geocode prevents default submit and gets boston location.', 'duration': 35.784, 'max_score': 1811.883, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pRiQeo17u6c/pics/pRiQeo17u6c1811883.jpg'}], 'start': 1378.064, 'title': 'Address formatting and geocoding', 'summary': 'Covers address formatting using bootstrap elements, and extracting latitude and longitude data. it also demonstrates using geocode to obtain location information based on a city name, allowing for dynamic map marker placement and form submission event handling, with potential integration into a map application.', 'chapters': [{'end': 1569.652, 'start': 1378.064, 'title': 'Address info formatting and output', 'summary': 'Covers the formatting and output of address information, including the use of bootstrap elements for separation and the extraction and display of latitude and longitude data from the geometry.', 'duration': 191.588, 'highlights': ['The chapter covers the formatting and output of address information, including the use of bootstrap elements for separation and the extraction and display of latitude and longitude data from the geometry.', 'The script demonstrates the use of bootstrap elements for formatting and separating address information, enhancing the visual presentation of the data.', 'Detailed steps are provided for extracting and displaying latitude and longitude data from the geometry, ensuring accurate geographic information is output.']}, {'end': 1965.858, 'start': 1569.652, 'title': 'Using geocode to get location information', 'summary': 'Demonstrates using geocode to obtain location information based on a city name, allowing for dynamic map marker placement, form submission event handling, and the formatting of addresses for database storage, with potential integration into a map application.', 'duration': 396.206, 'highlights': ['Obtaining location information using geocode based on city names, allowing for dynamic map marker placement. Demonstrates the capability to obtain location information such as city name, county, state, country, latitude, and longitude by using geocode based on a city name, enabling dynamic map marker placement.', 'Handling form submission events using plain JavaScript to trigger geocode function. Illustrates the process of handling form submission events using plain JavaScript, avoiding the use of jQuery, and triggering the geocode function upon submission.', 'Formatting of addresses for database storage to ensure accurate data entry. Showcases the importance of geocode in formatting addresses for database storage, ensuring accurate data entry even when users may omit certain address components like zip codes or states.']}], 'duration': 587.794, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pRiQeo17u6c/pics/pRiQeo17u6c1378064.jpg', 'highlights': ['Demonstrates using geocode to obtain location information based on a city name, allowing for dynamic map marker placement and form submission event handling, with potential integration into a map application.', 'Obtaining location information using geocode based on city names, allowing for dynamic map marker placement. Demonstrates the capability to obtain location information such as city name, county, state, country, latitude, and longitude by using geocode based on a city name, enabling dynamic map marker placement.', 'The chapter covers the formatting and output of address information, including the use of bootstrap elements for separation and the extraction and display of latitude and longitude data from the geometry.', 'Handling form submission events using plain JavaScript to trigger geocode function. Illustrates the process of handling form submission events using plain JavaScript, avoiding the use of jQuery, and triggering the geocode function upon submission.']}], 'highlights': ['The geocoding API allows us to retrieve latitude, longitude, country, and county from a street address.', 'Covers setting up the basic structure for a geocode app, analyzing response structure, formatting addresses, obtaining latitude and longitude values, and making http requests with axios.', 'Covers geocoding using Axios and creating a function called Geocode.', 'The chapter demonstrates extracting formatted address and geometry data, including latitude and longitude, from a response to be displayed on a web page.', 'Demonstrates using geocode to obtain location information based on a city name, allowing for dynamic map marker placement and form submission event handling, with potential integration into a map application.']}