title
Google Maps JavaScript API Tutorial
description
In this video I will work a little bit with the Google Maps API as requested by some of my subscribers. We will implement a map with some custom markers, info window, event listeners and we will optimize the code so that we can easily add new markers with new properties.
CODE: Code for this video
http://www.traversymedia.com/downloads/mymap.zip
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 Maps JavaScript API Tutorial', 'heatmap': [{'end': 203.312, 'start': 65.938, 'weight': 1}, {'end': 563.272, 'start': 524.078, 'weight': 0.75}], 'summary': 'This tutorial covers comprehensive steps for using the google maps api, including creating a map, adding markers, custom icons, and pop-up overlays. it also discusses setting up the api key, project in atom, and refactoring javascript code for map marker creation.', 'chapters': [{'end': 59.256, 'segs': [{'end': 72.2, 'src': 'embed', 'start': 43.401, 'weight': 0, 'content': [{'end': 47.565, 'text': "If you're interested in learning web development, iOS or UX design,", 'start': 43.401, 'duration': 4.164}, {'end': 53.171, 'text': 'DevMountain is a 12-week design and development boot camp intended to get you a full-time job in the industry.', 'start': 47.565, 'duration': 5.606}, {'end': 57.135, 'text': 'To learn more, visit devmountain.com or click the link in the description below.', 'start': 53.511, 'duration': 3.624}, {'end': 59.256, 'text': "All right, so let's go ahead and get started.", 'start': 57.836, 'duration': 1.42}, {'end': 65.278, 'text': 'Now, I have the documentation open for Google Maps, which is developers.google.com slash maps.', 'start': 59.296, 'duration': 5.982}, {'end': 72.2, 'text': "And there's a few different guides if you're developing for Android, iOS, web services, but we're going to be dealing with just web.", 'start': 65.938, 'duration': 6.262}], 'summary': 'Devmountain offers 12-week boot camp for web development, ios, and ux design to secure full-time job in the industry.', 'duration': 28.799, 'max_score': 43.401, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Zxf1mnP5zcw/pics/Zxf1mnP5zcw43401.jpg'}], 'start': 7.386, 'title': 'Using google maps api', 'summary': "Covers a comprehensive tutorial on using the google maps api, including creating a map, adding markers, custom icons, and pop-up overlays. it also includes a sponsorship mention for devmountain's 12-week design and development boot camp.", 'chapters': [{'end': 59.256, 'start': 7.386, 'title': 'Google maps api tutorial', 'summary': "Covers a comprehensive tutorial on using the google maps api, including creating a map, adding markers, custom icons, and pop-up overlays, with emphasis on providing a no-nonsense guide. it also includes a sponsorship mention for devmountain's 12-week design and development boot camp.", 'duration': 51.87, 'highlights': ['The chapter covers a comprehensive tutorial on using the Google Maps API, including creating a map, adding markers, custom icons, and pop-up overlays, with emphasis on providing a no-nonsense guide.', 'The video is sponsored by DevMountain, a 12-week design and development boot camp intended to prepare individuals for a full-time job in the industry.', "We're going to organize the code so that we can easily add markers to an array, make it so that we can have custom icons for our markers, and add pop-up overlays.", 'DevMountain is mentioned as a 12-week design and development boot camp intended to get individuals a full-time job in the industry.']}], 'duration': 51.87, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Zxf1mnP5zcw/pics/Zxf1mnP5zcw7386.jpg', 'highlights': ['The chapter covers a comprehensive tutorial on using the Google Maps API, including creating a map, adding markers, custom icons, and pop-up overlays, with emphasis on providing a no-nonsense guide.', "We're going to organize the code so that we can easily add markers to an array, make it so that we can have custom icons for our markers, and add pop-up overlays.", 'The video is sponsored by DevMountain, a 12-week design and development boot camp intended to prepare individuals for a full-time job in the industry.', 'Devmountain is mentioned as a 12-week design and development boot camp intended to get individuals a full-time job in the industry.']}, {'end': 294.654, 'segs': [{'end': 203.312, 'src': 'heatmap', 'start': 65.938, 'weight': 1, 'content': [{'end': 72.2, 'text': "And there's a few different guides if you're developing for Android, iOS, web services, but we're going to be dealing with just web.", 'start': 65.938, 'duration': 6.262}, {'end': 73.46, 'text': "So we're going to click on that.", 'start': 72.26, 'duration': 1.2}, {'end': 77.121, 'text': "And we're also dealing with the JavaScript API.", 'start': 74.3, 'duration': 2.821}, {'end': 79.861, 'text': "There's a lot of different services, a lot of different APIs.", 'start': 77.141, 'duration': 2.72}, {'end': 82.062, 'text': "You want to make sure you're using the JavaScript one.", 'start': 79.881, 'duration': 2.181}, {'end': 83.395, 'text': 'All right.', 'start': 82.895, 'duration': 0.5}, {'end': 91.882, 'text': "and then, if we go to create map with a marker, we're not going to strictly follow this and copy all the code exactly,", 'start': 83.395, 'duration': 8.487}, {'end': 95.084, 'text': 'but it gives you a good idea of how to get started.', 'start': 91.882, 'duration': 3.202}, {'end': 99.968, 'text': 'So I figured I would just kind of keep this open as we go along.', 'start': 95.204, 'duration': 4.764}, {'end': 108.074, 'text': 'Now, in order to use this, if you look down here, when we actually include the map API script, you need to have an API key.', 'start': 100.528, 'duration': 7.546}, {'end': 115.833, 'text': "Alright, so to do that, we're going to go to our Google API console, which is console.developers.google.com.", 'start': 108.706, 'duration': 7.127}, {'end': 118.456, 'text': "And you're going to have to have a project.", 'start': 116.494, 'duration': 1.962}, {'end': 119.978, 'text': "So let's say create project.", 'start': 118.516, 'duration': 1.462}, {'end': 126.104, 'text': "And for this, I'm just going to say test project and click create.", 'start': 120.759, 'duration': 5.345}, {'end': 127.545, 'text': 'all right.', 'start': 127.125, 'duration': 0.42}, {'end': 136.834, 'text': "and then this isn't just for maps, this is for any, any google api, geocoding, or, you know, youtube or video apis, things like that.", 'start': 127.545, 'duration': 9.289}, {'end': 147.242, 'text': "so let's go over here and click this and go to uh, let's see, we want to go to dashboard And if we click on Enable API,", 'start': 136.834, 'duration': 10.408}, {'end': 149.743, 'text': 'this is all the stuff we have to choose from.', 'start': 147.242, 'duration': 2.501}, {'end': 158.548, 'text': 'So we can work with Google Docs and Gmail and Google+, social networking APIs, all this stuff, analytics.', 'start': 149.844, 'duration': 8.704}, {'end': 163.05, 'text': 'What we want is right here, Google Maps JavaScript API.', 'start': 158.948, 'duration': 4.102}, {'end': 164.531, 'text': "So we'll click on that.", 'start': 163.59, 'duration': 0.941}, {'end': 169.513, 'text': "And then we're going to, let's see, select project.", 'start': 165.551, 'duration': 3.962}, {'end': 185.296, 'text': "and let's see, select and we're going to choose test project and then, if we go to enable, that should enable it and it should give us a key.", 'start': 171.155, 'duration': 14.141}, {'end': 192.503, 'text': 'so if we go down to credentials and create credentials, we want to create an API key and there it is right there.', 'start': 185.296, 'duration': 7.207}, {'end': 195.505, 'text': "okay, so let's go ahead and just copy that.", 'start': 192.503, 'duration': 3.002}, {'end': 203.312, 'text': "now you can restrict this to certain domains if you want, but we're just going to leave it completely open and let's just click close.", 'start': 195.505, 'duration': 7.807}], 'summary': 'The transcript provides a guide on setting up the google maps javascript api for web development, including obtaining an api key and enabling the necessary services.', 'duration': 137.374, 'max_score': 65.938, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Zxf1mnP5zcw/pics/Zxf1mnP5zcw65938.jpg'}, {'end': 149.743, 'src': 'embed', 'start': 100.528, 'weight': 0, 'content': [{'end': 108.074, 'text': 'Now, in order to use this, if you look down here, when we actually include the map API script, you need to have an API key.', 'start': 100.528, 'duration': 7.546}, {'end': 115.833, 'text': "Alright, so to do that, we're going to go to our Google API console, which is console.developers.google.com.", 'start': 108.706, 'duration': 7.127}, {'end': 118.456, 'text': "And you're going to have to have a project.", 'start': 116.494, 'duration': 1.962}, {'end': 119.978, 'text': "So let's say create project.", 'start': 118.516, 'duration': 1.462}, {'end': 126.104, 'text': "And for this, I'm just going to say test project and click create.", 'start': 120.759, 'duration': 5.345}, {'end': 127.545, 'text': 'all right.', 'start': 127.125, 'duration': 0.42}, {'end': 136.834, 'text': "and then this isn't just for maps, this is for any, any google api, geocoding, or, you know, youtube or video apis, things like that.", 'start': 127.545, 'duration': 9.289}, {'end': 147.242, 'text': "so let's go over here and click this and go to uh, let's see, we want to go to dashboard And if we click on Enable API,", 'start': 136.834, 'duration': 10.408}, {'end': 149.743, 'text': 'this is all the stuff we have to choose from.', 'start': 147.242, 'duration': 2.501}], 'summary': 'To use google maps api, you need an api key from the google api console, which supports various google apis.', 'duration': 49.215, 'max_score': 100.528, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Zxf1mnP5zcw/pics/Zxf1mnP5zcw100528.jpg'}, {'end': 294.654, 'src': 'embed', 'start': 250.964, 'weight': 1, 'content': [{'end': 256.565, 'text': "so if i go start server, it'll actually open it up on a port on my local host, all right.", 'start': 250.964, 'duration': 5.601}, {'end': 260.466, 'text': 'now, if you want these installed as well, you just need to go to settings.', 'start': 256.565, 'duration': 3.901}, {'end': 272.22, 'text': 'and if you go to install and you want to search for first Emmet packages and you want to install this here, alright.', 'start': 262.428, 'duration': 9.792}, {'end': 281.507, 'text': "and then, if you want this, the live server just search for Adam live server packages and you're gonna want this one here by jazz Chen.", 'start': 272.22, 'duration': 9.287}, {'end': 284.189, 'text': "okay, so those are the two plugins that I'm using.", 'start': 281.507, 'duration': 2.682}, {'end': 286.65, 'text': "but again, you don't need those, you don't need to use Adam.", 'start': 284.189, 'duration': 2.461}, {'end': 288.671, 'text': "use whatever you'd like, all right.", 'start': 286.65, 'duration': 2.021}, {'end': 294.654, 'text': "so with Emmett I can just do an exclamation and then tab and it's gonna give us kind of an HTML structure.", 'start': 288.671, 'duration': 5.983}], 'summary': "Using 'emmet' and 'live server' plugins for efficient web development.", 'duration': 43.69, 'max_score': 250.964, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Zxf1mnP5zcw/pics/Zxf1mnP5zcw250964.jpg'}], 'start': 59.296, 'title': 'Setting up google maps and atom project', 'summary': 'Discusses setting up the google maps javascript api, including obtaining an api key and the steps involved, and also covers setting up a project in atom, including creating an index html file and utilizing plugins for efficient coding and local hosting.', 'chapters': [{'end': 206.575, 'start': 59.296, 'title': 'Setting up google maps javascript api', 'summary': 'Discusses the process of setting up the google maps javascript api, including obtaining an api key from the google api console and the steps involved in creating a project, selecting the javascript api, and generating the api key, emphasizing the importance of the key for accessing the map api.', 'duration': 147.279, 'highlights': ['The chapter discusses the process of setting up the Google Maps JavaScript API. Setting up the Google Maps JavaScript API, obtaining an API key from the Google API console.', 'The steps involved in creating a project, selecting the JavaScript API, and generating the API key are explained. Creating a project, selecting the JavaScript API, generating the API key.', 'Emphasizes the importance of the key for accessing the map API. Emphasizing the importance of the key for accessing the map API.']}, {'end': 294.654, 'start': 207.256, 'title': 'Setting up project in atom', 'summary': 'Covers setting up a project in atom, including creating an index html file and utilizing plugins like emmet and adam live server for efficient coding and local hosting.', 'duration': 87.398, 'highlights': ['The speaker uses Atom text editor to set up the project, creating an index HTML file within a folder called My Map.', 'The speaker utilizes the Emmet plugin for shorthand coding, such as creating div tags and IDs with ease.', 'The speaker also uses Adam live server to open the file on localhost, providing instructions on how to install both Emmet and Adam live server plugins within Atom.']}], 'duration': 235.358, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Zxf1mnP5zcw/pics/Zxf1mnP5zcw59296.jpg', 'highlights': ['The chapter discusses the process of setting up the Google Maps JavaScript API, including obtaining an API key.', 'Emphasizes the importance of the key for accessing the map API.', 'The steps involved in creating a project, selecting the JavaScript API, and generating the API key are explained.', 'The speaker uses Atom text editor to set up the project, creating an index HTML file within a folder called My Map.', 'The speaker utilizes the Emmet plugin for shorthand coding, such as creating div tags and IDs with ease.', 'The speaker also uses Adam live server to open the file on localhost, providing instructions on how to install both Emmet and Adam live server plugins within Atom.']}, {'end': 988.673, 'segs': [{'end': 434.084, 'src': 'embed', 'start': 406.144, 'weight': 3, 'content': [{'end': 411.488, 'text': "my google map all right and then inside init map we're going to want to do a couple things.", 'start': 406.144, 'duration': 5.344}, {'end': 416.431, 'text': "so we're going to want to set a variable called map and set it to a new google map object.", 'start': 411.488, 'duration': 4.943}, {'end': 424.277, 'text': 'okay, since we included this script right here, we can do this new google maps, dot, and then we can do different things to get the map.', 'start': 416.431, 'duration': 7.846}, {'end': 427.799, 'text': "we just do dot map and that's going to take in two parameters.", 'start': 424.277, 'duration': 3.522}, {'end': 434.084, 'text': 'one is going to be the the element that we want to dump it in, which is the id of map, and then some options.', 'start': 427.799, 'duration': 6.285}], 'summary': 'Initializing a new google map object with specified parameters.', 'duration': 27.94, 'max_score': 406.144, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Zxf1mnP5zcw/pics/Zxf1mnP5zcw406144.jpg'}, {'end': 563.272, 'src': 'heatmap', 'start': 524.078, 'weight': 0.75, 'content': [{'end': 528.546, 'text': "Now if I go ahead and save this and let it reload, you'll see that we don't see anything.", 'start': 524.078, 'duration': 4.468}, {'end': 531.811, 'text': "That's because we haven't set a height and a width to our map.", 'start': 529.026, 'duration': 2.785}, {'end': 534.434, 'text': 'So it has the ID of map.', 'start': 532.451, 'duration': 1.983}, {'end': 537.158, 'text': "So let's go in the head here and say style.", 'start': 534.454, 'duration': 2.704}, {'end': 552.143, 'text': "and say the ID of map and we're going to set the height to 400 pixels and then we'll set the width to 100% of its container and if we save that and let it reload,", 'start': 539.328, 'duration': 12.815}, {'end': 553.765, 'text': 'now we have a map.', 'start': 552.143, 'duration': 1.622}, {'end': 558.789, 'text': "okay, and you can see it's centered on Boston And we can go ahead and change the zoom level if we want.", 'start': 553.765, 'duration': 5.024}, {'end': 563.272, 'text': "So if we were to say like zoom 2, save that, you'll see it zooms way out.", 'start': 558.889, 'duration': 4.383}], 'summary': 'Setting height and width for map, 400px height, 100% width, zoom level adjusted', 'duration': 39.194, 'max_score': 524.078, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Zxf1mnP5zcw/pics/Zxf1mnP5zcw524078.jpg'}, {'end': 563.272, 'src': 'embed', 'start': 534.454, 'weight': 2, 'content': [{'end': 537.158, 'text': "So let's go in the head here and say style.", 'start': 534.454, 'duration': 2.704}, {'end': 552.143, 'text': "and say the ID of map and we're going to set the height to 400 pixels and then we'll set the width to 100% of its container and if we save that and let it reload,", 'start': 539.328, 'duration': 12.815}, {'end': 553.765, 'text': 'now we have a map.', 'start': 552.143, 'duration': 1.622}, {'end': 558.789, 'text': "okay, and you can see it's centered on Boston And we can go ahead and change the zoom level if we want.", 'start': 553.765, 'duration': 5.024}, {'end': 563.272, 'text': "So if we were to say like zoom 2, save that, you'll see it zooms way out.", 'start': 558.889, 'duration': 4.383}], 'summary': 'Code sets map height to 400px, width to 100%, centered on boston, zoom level can be changed.', 'duration': 28.818, 'max_score': 534.454, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Zxf1mnP5zcw/pics/Zxf1mnP5zcw534454.jpg'}, {'end': 621.805, 'src': 'embed', 'start': 583.439, 'weight': 4, 'content': [{'end': 588.522, 'text': 'set it to a new marker and then we put in the position and then the map we want to add it to.', 'start': 583.439, 'duration': 5.083}, {'end': 589.583, 'text': 'All right.', 'start': 588.542, 'duration': 1.041}, {'end': 594.406, 'text': "So let's go down here under where we created the map variable.", 'start': 589.763, 'duration': 4.643}, {'end': 597.047, 'text': 'Let me just add some comments here as well.', 'start': 595.026, 'duration': 2.021}, {'end': 605.772, 'text': "So this is the map options and this is we're saying new new map.", 'start': 597.087, 'duration': 8.685}, {'end': 615.622, 'text': "and then here let's say add marker, so we'll do variable marker.", 'start': 608.177, 'duration': 7.445}, {'end': 621.805, 'text': 'set that to new google.maps.marker, all right.', 'start': 615.622, 'duration': 6.183}], 'summary': 'Adding a new marker to a map using google maps api.', 'duration': 38.366, 'max_score': 583.439, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Zxf1mnP5zcw/pics/Zxf1mnP5zcw583439.jpg'}, {'end': 846.461, 'src': 'embed', 'start': 817.692, 'weight': 5, 'content': [{'end': 821.755, 'text': "And now if we go over here and click, you'll see we get our pop-up window with the H1.", 'start': 817.692, 'duration': 4.063}, {'end': 823.556, 'text': 'All right.', 'start': 821.935, 'duration': 1.621}, {'end': 824.397, 'text': "So that's kind of cool.", 'start': 823.576, 'duration': 0.821}, {'end': 833.174, 'text': "So that's basically how you can add a single marker with a custom icon, with an info window.", 'start': 826.09, 'duration': 7.084}, {'end': 836.856, 'text': 'But now what I want to do is I want to make it so that we can have multiple markers.', 'start': 833.594, 'duration': 3.262}, {'end': 846.461, 'text': "Now what we could do is copy all of this right here and then just paste it in for each and every marker, but that's not very efficient.", 'start': 837.636, 'duration': 8.825}], 'summary': 'Demonstrating how to add single and multiple markers with custom icons and info windows.', 'duration': 28.769, 'max_score': 817.692, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Zxf1mnP5zcw/pics/Zxf1mnP5zcw817692.jpg'}, {'end': 988.673, 'src': 'embed', 'start': 951.974, 'weight': 0, 'content': [{'end': 956.695, 'text': "Let's get the coordinates for, let's say, Amesbury Mass, which is where I live now.", 'start': 951.974, 'duration': 4.721}, {'end': 962.618, 'text': "Just copy that, paste that in, and we'll grab this one.", 'start': 956.715, 'duration': 5.903}, {'end': 966.502, 'text': "that, save it, let's go back.", 'start': 964.741, 'duration': 1.761}, {'end': 968.883, 'text': 'and now you see, we have two markers.', 'start': 966.502, 'duration': 2.381}, {'end': 971.944, 'text': "okay, so let's add another one.", 'start': 968.883, 'duration': 3.061}, {'end': 980.469, 'text': "we'll say I don't know, let's do Haverhill.", 'start': 971.944, 'duration': 8.525}, {'end': 988.673, 'text': "so actually let's copy this and paste that in here.", 'start': 980.469, 'duration': 8.204}], 'summary': 'The speaker adds coordinates for amesbury and haverhill, resulting in two markers on the map.', 'duration': 36.699, 'max_score': 951.974, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Zxf1mnP5zcw/pics/Zxf1mnP5zcw951974.jpg'}], 'start': 294.654, 'title': 'Using google maps api', 'summary': 'Covers adding a google map to a web page, incorporating the google map api script, obtaining and using the api key, setting up a map, adding markers with custom icons, creating an info window, and efficiently adding multiple markers using a function.', 'chapters': [{'end': 352.796, 'start': 294.654, 'title': 'Adding google map with api', 'summary': 'Discusses adding a google map to a web page and includes details on changing the title, incorporating the google map api script, and obtaining and using the api key.', 'duration': 58.142, 'highlights': ["Changing the title to 'My Google Map'", 'Incorporating the Google Map API script into the web page', 'Obtaining and using the API key']}, {'end': 988.673, 'start': 353.136, 'title': 'Google maps api tutorial', 'summary': 'Provides a tutorial on using the google maps api in javascript, covering the process of setting up a map, adding markers with custom icons, and creating an info window, along with demonstrating how to efficiently add multiple markers using a function.', 'duration': 635.537, 'highlights': ['The tutorial covers setting up the map, adding markers, and creating an info window. The tutorial explains the process of setting up a map, adding markers with custom icons, and creating an info window to display content when a marker is clicked.', 'Demonstration of efficiently adding multiple markers using a function. The tutorial demonstrates how to efficiently add multiple markers by creating a function called addMarker and passing in coordinates to dynamically generate markers.', 'Explanation of setting the height and width of the map. The tutorial explains how to set the height to 400 pixels and the width to 100% of the container to display the map.']}], 'duration': 694.019, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Zxf1mnP5zcw/pics/Zxf1mnP5zcw294654.jpg', 'highlights': ['Incorporating the Google Map API script into the web page', 'Obtaining and using the API key', 'Demonstration of efficiently adding multiple markers using a function', 'Creating an info window to display content when a marker is clicked', 'Setting the height to 400 pixels and the width to 100% of the container to display the map', "Changing the title to 'My Google Map'", 'The tutorial covers setting up the map, adding markers, and creating an info window']}, {'end': 1295.02, 'segs': [{'end': 1037.551, 'src': 'embed', 'start': 1012.361, 'weight': 4, 'content': [{'end': 1018.525, 'text': 'So what I would do is I would change it from just entering the chords into this function to entering some properties.', 'start': 1012.361, 'duration': 6.164}, {'end': 1021.627, 'text': 'And chords will be one of those properties.', 'start': 1019.646, 'duration': 1.981}, {'end': 1033.195, 'text': "So what we'll do is let's go in here and say chords colon and then that's going to be its own object.", 'start': 1022.428, 'duration': 10.767}, {'end': 1035.718, 'text': 'We have to add another one over here, another curly brace.', 'start': 1033.516, 'duration': 2.202}, {'end': 1037.551, 'text': 'That should be chords.', 'start': 1036.79, 'duration': 0.761}], 'summary': "Propose updating function to include chord properties, specifically adding a 'chords' object.", 'duration': 25.19, 'max_score': 1012.361, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Zxf1mnP5zcw/pics/Zxf1mnP5zcw1012361.jpg'}, {'end': 1101.73, 'src': 'embed', 'start': 1070.309, 'weight': 2, 'content': [{'end': 1074.092, 'text': 'Now, in addition to the coordinates, we want to be able to put an image or an icon.', 'start': 1070.309, 'duration': 3.783}, {'end': 1077.754, 'text': 'So let me just bring this down here like that.', 'start': 1074.172, 'duration': 3.582}, {'end': 1079.516, 'text': "And then we'll put a comma.", 'start': 1078.455, 'duration': 1.061}, {'end': 1083.779, 'text': "And then let's do, we'll just say icon image.", 'start': 1080.316, 'duration': 3.463}, {'end': 1087.919, 'text': "Alright, and then let's grab this.", 'start': 1086.178, 'duration': 1.741}, {'end': 1091.082, 'text': 'Copy that.', 'start': 1090.421, 'duration': 0.661}, {'end': 1092.663, 'text': 'Put it in there.', 'start': 1091.923, 'duration': 0.74}, {'end': 1101.73, 'text': "And then instead of doing this hard-coded image, we'll do props.iconImage.", 'start': 1093.424, 'duration': 8.306}], 'summary': 'Adding an image or icon to coordinates, using props.iconimage', 'duration': 31.421, 'max_score': 1070.309, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Zxf1mnP5zcw/pics/Zxf1mnP5zcw1070309.jpg'}, {'end': 1269.132, 'src': 'embed', 'start': 1211.127, 'weight': 0, 'content': [{'end': 1215.029, 'text': "So we'll go up here, put a comma, and let's say content.", 'start': 1211.127, 'duration': 3.902}, {'end': 1217.99, 'text': "And I'm going to set that to an H1.", 'start': 1216.049, 'duration': 1.941}, {'end': 1222.452, 'text': "And let's say Lin Mass.", 'start': 1220.271, 'duration': 2.181}, {'end': 1226.073, 'text': "And then down here, we're going to do kind of the same thing we did here.", 'start': 1223.312, 'duration': 2.761}, {'end': 1231.715, 'text': "We're going to check to see if the content was put in for that particular location.", 'start': 1226.093, 'duration': 5.622}, {'end': 1236.397, 'text': "So let's say check content.", 'start': 1232.636, 'duration': 3.761}, {'end': 1238.178, 'text': "So we'll say if.", 'start': 1237.378, 'duration': 0.8}, {'end': 1247.4, 'text': "props.content, then we're going to do what we did up here.", 'start': 1241.837, 'duration': 5.563}, {'end': 1250.302, 'text': "We're going to create the info window, and then we're going to add the listener.", 'start': 1247.42, 'duration': 2.882}, {'end': 1251.903, 'text': "So I'm just going to copy that.", 'start': 1250.402, 'duration': 1.501}, {'end': 1255.284, 'text': "Let's put that in.", 'start': 1251.923, 'duration': 3.361}, {'end': 1259.607, 'text': "And except we don't want this hard-coded value.", 'start': 1256.105, 'duration': 3.502}, {'end': 1263.829, 'text': 'We want this to be the props.content that was passed in.', 'start': 1260.227, 'duration': 3.602}, {'end': 1265.97, 'text': "All right, so let's save that.", 'start': 1264.81, 'duration': 1.16}, {'end': 1269.132, 'text': "And now if we go and click on this one here, you'll see we get our pop-up.", 'start': 1266.07, 'duration': 3.062}], 'summary': 'Creating an info window with props.content and adding a listener.', 'duration': 58.005, 'max_score': 1211.127, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Zxf1mnP5zcw/pics/Zxf1mnP5zcw1211127.jpg'}], 'start': 988.673, 'title': 'Customizing map markers', 'summary': 'Demonstrates customizing map markers by adding custom properties, resulting in unique marker images, and discusses google maps marker customization using props and conditional statements to enable personalized pop-ups and avoid undefined values.', 'chapters': [{'end': 1122.804, 'start': 988.673, 'title': 'Custom marker icons for map', 'summary': 'Demonstrates how to customize marker icons for a map by adding custom properties to the markers, allowing the addition of unique images for specific markers, resulting in a beach icon for one marker and standard map icons for others.', 'duration': 134.131, 'highlights': ['Adding custom properties to markers The chapter explains the process of adding custom properties to the markers by changing from entering just the chords into a function to entering some properties, resulting in the ability to add unique images for specific markers.', "Using custom images for specific markers The chapter demonstrates the use of custom images for specific markers by adding an 'icon image' property to the markers, allowing for the display of a beach icon for a specific marker and standard map icons for others."]}, {'end': 1295.02, 'start': 1124.666, 'title': 'Google maps marker customization', 'summary': 'Discusses customizing markers and info windows on google maps using props and conditional statements, aiming to avoid undefined values and enable personalized pop-ups, with an example of setting custom icons and content.', 'duration': 170.354, 'highlights': ['Customizing marker icon The chapter demonstrates checking for the presence of props.iconImage and setting the marker icon using conditional statements, ensuring no undefined values.', 'Personalizing info windows The chapter explains how to pass content as a property and use conditional statements to create personalized info windows for different locations on the map.', "Example of personalized pop-ups An example is provided where personalized pop-ups are demonstrated by passing in specific content for different locations, such as 'Lin Mass' and 'Amesbury Mass.'"]}], 'duration': 306.347, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Zxf1mnP5zcw/pics/Zxf1mnP5zcw988673.jpg', 'highlights': ['Adding custom properties to markers for unique images', "Using custom images for specific markers with 'icon image' property", 'Customizing marker icon using conditional statements', 'Personalizing info windows with conditional statements', 'Example of personalized pop-ups for specific locations']}, {'end': 1646.237, 'segs': [{'end': 1548.83, 'src': 'embed', 'start': 1509.18, 'weight': 0, 'content': [{'end': 1514.601, 'text': "or we'll say listen for click on map.", 'start': 1509.18, 'duration': 5.421}, {'end': 1523.203, 'text': "So to do that, we're going to do google.maps.event.addlistener.", 'start': 1517.302, 'duration': 5.901}, {'end': 1530.805, 'text': 'Okay and we want to pass in the map.', 'start': 1523.383, 'duration': 7.422}, {'end': 1538.107, 'text': 'we want to listen on, which is the variable map, and then the event, which will be a click, and then we want to run a function.', 'start': 1530.805, 'duration': 7.302}, {'end': 1548.83, 'text': 'Alright, so this function will take in an event parameter and then in here we just want to call add marker.', 'start': 1541.215, 'duration': 7.615}], 'summary': 'Using google.maps.event.addlistener to listen for click on map and call add marker function.', 'duration': 39.65, 'max_score': 1509.18, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Zxf1mnP5zcw/pics/Zxf1mnP5zcw1509180.jpg'}, {'end': 1646.237, 'src': 'embed', 'start': 1618.426, 'weight': 4, 'content': [{'end': 1622.269, 'text': 'you can edit the information so you can do some really cool stuff with this.', 'start': 1618.426, 'duration': 3.843}, {'end': 1626.632, 'text': "and i'm not, like i said, i'm not going to get into database stuff, back end stuff.", 'start': 1622.269, 'duration': 4.363}, {'end': 1633.518, 'text': 'i just wanted to give you kind of an introduction to some of the things that you could do with the javascript api.', 'start': 1626.632, 'duration': 6.886}, {'end': 1636.44, 'text': 'all right, so hopefully you guys enjoyed this video.', 'start': 1633.518, 'duration': 2.922}, {'end': 1643.451, 'text': "i know it's a little different than than what we usually do, but you know I like to try to fulfill as many requests as I can.", 'start': 1636.44, 'duration': 7.011}, {'end': 1646.237, 'text': 'so thanks for watching and I will see you next time.', 'start': 1643.451, 'duration': 2.786}], 'summary': 'Intro to javascript api for cool functionalities. thanks for watching!', 'duration': 27.811, 'max_score': 1618.426, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Zxf1mnP5zcw/pics/Zxf1mnP5zcw1618426.jpg'}], 'start': 1295.701, 'title': 'Javascript code refactoring and map marker creation', 'summary': 'Covers refactoring javascript code by using arrays to optimize the process, and demonstrates adding click listeners on a google map to create markers with coordinates, emphasizing the potential to save locations in a database and enable marker editing functionality.', 'chapters': [{'end': 1445.764, 'start': 1295.701, 'title': 'Refactoring javascript code with arrays', 'summary': "Discusses refactoring javascript code by creating an array of markers to optimize the process, reducing the need to call 'add marker' for each individual marker and instead looping through the array to call 'add marker' once for each iteration.", 'duration': 150.063, 'highlights': ['Creating an array of markers to optimize the process The speaker suggests creating an array called markers to store all the properties, providing a more efficient way of handling the markers.', "Looping through the array to call 'add marker' once for each iteration The method of looping through the markers array and calling 'add marker' once for each iteration is presented as a much cleaner and more efficient approach, reducing the need to call 'add marker' for each individual marker.", 'Grasping the concept of JavaScript objects The speaker emphasizes the importance of having a basic knowledge of JavaScript to understand the concept of JavaScript objects, providing context for the subsequent discussion on refactoring the code using arrays.']}, {'end': 1646.237, 'start': 1450.689, 'title': 'Javascript map marker creation', 'summary': 'Demonstrates how to add a click listener on a google map to create markers with latitude and longitude coordinates, highlighting the potential to save locations in a database and enable editing functionality for the markers.', 'duration': 195.548, 'highlights': ['The chapter demonstrates how to add a click listener on a Google Map to create markers with latitude and longitude coordinates. The tutorial explains the process of adding a listener to the map to create markers on a click event, utilizing the latitude and longitude coordinates of the clicked area.', 'The potential to save locations in a database and enable editing functionality for the markers is highlighted. The tutorial mentions the possibility of saving marker locations in a database, along with enabling editing functionality for the markers, suggesting the capability to submit form data to a database and edit marker information.']}], 'duration': 350.536, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Zxf1mnP5zcw/pics/Zxf1mnP5zcw1295701.jpg', 'highlights': ['Creating an array of markers to optimize the process', "Looping through the array to call 'add marker' once for each iteration", "The method of looping through the markers array and calling 'add marker' once for each iteration is presented as a much cleaner and more efficient approach, reducing the need to call 'add marker' for each individual marker.", 'The chapter demonstrates how to add a click listener on a Google Map to create markers with latitude and longitude coordinates.', 'The potential to save locations in a database and enable editing functionality for the markers is highlighted.']}], 'highlights': ['The tutorial covers comprehensive steps for using the Google Maps API, including creating a map, adding markers, custom icons, and pop-up overlays.', 'The chapter covers a comprehensive tutorial on using the Google Maps API, including creating a map, adding markers, custom icons, and pop-up overlays, with emphasis on providing a no-nonsense guide.', 'Incorporating the Google Map API script into the web page', 'Obtaining and using the API key', 'Demonstration of efficiently adding multiple markers using a function', 'Creating an info window to display content when a marker is clicked', 'Adding custom properties to markers for unique images', "Using custom images for specific markers with 'icon image' property", 'Customizing marker icon using conditional statements', 'Personalizing info windows with conditional statements', 'Creating an array of markers to optimize the process', "Looping through the array to call 'add marker' once for each iteration", "The method of looping through the markers array and calling 'add marker' once for each iteration is presented as a much cleaner and more efficient approach, reducing the need to call 'add marker' for each individual marker.", 'The chapter demonstrates how to add a click listener on a Google Map to create markers with latitude and longitude coordinates.', 'The potential to save locations in a database and enable editing functionality for the markers is highlighted.']}