 Okay, again, this is part of a series of videos. Be sure to check out the full playlist. There should be an annotation on the screen or a link in the description of the video to the full playlist. And we'll be adding on to stuff we've already done. We've already gone over creating maps and placing markers. Today, we're going to be looking at clicking on the map, getting that location, and then placing a marker on the map, like so. So we're just gonna go with the default Google marker this time around, which is the same as placing the custom marker, just not telling it to use a certain image. So that said, I can still drag and click someplace else. So let's go ahead and look at that code. And a majority of it's the same. We're gonna be creating the map just like we have in the past. We've got our empty div tag here, our empty element that we've given an idea of map canvas. You don't have to call it that, but that's what we're calling it. And then we're gonna call that in our function up here. And again, we're creating a variable for our coordinates, which is where our map's gonna be centered at. And then here we're saying, when the map, when the page is loaded, when the window is loaded, everything's loaded, we're on our initialize function. So our initialize function up here, we're saying, okay, we're gonna create a map. Gonna give it options. So I changed things a little bit from last time. Last time I did a zoom of 15, a map. I think I did road maps. This time we're doing terrain. And then we're centering the map on this variable center, which we created up here, which is based on these coordinates. So that's creating the map, centering the map, zooming into a certain type and a certain depth and telling it what type of map to create. All stuff we've gone over in the past. So that that's the options. Here we're actually gonna create the map object. Gonna say new Google Maps. And so remember when I was saying new Google Maps or Google Maps, we're using the Google API from up here that we imported. And again, my code is free and open source for you to use, but realize that we are using some code that is not necessarily free as in freedom. So just keep that in mind and we're using services that are a service that someone's provided. And anytime someone's providing a service for you and you're not doing it yourself, that can always be taken away. And there are restrictions, limitations. Always keep that in mind. Okay, so we're gonna say create this object, this map. We're creating a map. We're gonna create it. So we're gonna look at our document, our entire page, get the elements, that's our div tag down here. And we're gonna pass it these options right here. Okay, so that's creating it. Next we need to create a listener. Basically, a listener is going to listen for an event. And in this case, we're gonna say, okay, look at our Google map. We're gonna be listening for an event on this map object. Okay? So we're listening for that. And there's different types of events. You know, it could be a key down or other stuff. We're gonna say if the map is clicked. So right here we're saying which map, which is our map right here. When it's clicked, we're gonna run a function and we're gonna get what event, we're gonna pass the information that was passed to it as event. And then here we're gonna say, okay, now that we've realized the map has been clicked and we've grabbed that information, we are now going to run the function place marker, but we're gonna pass it the event latitude and longitude. So this is saying, okay, the map was clicked. There's lots of information about that map and where it was clicked. But in this particular case, we want the formatted latitude and longitude. We're gonna pass that to our function down here and we're gonna call that location. So basically we're saying that latitude, longitude, we're now calling location. And then we're gonna say, well, we're gonna create a variable on our object here called marker. Again, we're gonna use the Google API JavaScript to create a marker, just as we've done in previous tutorials. This time we're not gonna give it an icon. In the previous ones, we gave it an icon and we told it what image to use. So since we're not giving it an icon, it's gonna go to the default red bubble icon. We're telling it which map to use. So that's our map that we created up here. And we're gonna pass it its position, which is location, which is the variable here of where we clicked. And that is it. So basically this is very similar to what we've done when we created a marker in place that except for we're listening for a click and then grabbing that event information and passing it to a new function that creates the marker. Again, you can do this with custom icons. So again, here, let me refresh this page. Centers, zooms, it sets it to a terrain. As you can see, it's showing elevation, I guess, and water stuff, but it's still showing streets. And I can click different places and place markers. And a lot can be done with this if we look at another example here. Icon placement, this is a little script that I've been having, I just started working on it just for fun. I have very low resolution icons here, either a little blown up, but I have a fire on IFF logo here and a fire logo. And I figure you can have a bunch of icons up there and on a laptop or a tablet or a phone, you can have, okay, I'm gonna place this here and that represents where the fire station is. And I can click up here, right now I have no notification telling you what object you've clicked up there, but I can go, oh, there's a fire here and it's spread over there. And then I can click up here and I can have a picture of a fire engine or whatever icons I want. And I can go, okay, then there was a fire truck here and we had another one placed over here with all these different icons. And I thought that that would be useful as my day job being a firefighter. We can have reviews of fires after, which we normally do when some draws on a chalkboard. They make a pretty poorly drawn map and sure how where the fire is and all stuff. And I just thought that maybe if we got, if I got a series of icons up here, it could make it a little more useful and clean. And of course, that's something that just kind of playing around with now, but we'll probably work a little bit more on the future out a bunch of icons and remove functionality on a few other things, but very simple, very easy to use. You can do satellite view and see where the fire was. Oh, it was all up in these trees here, you know. And then another, we'll say this is a fire truck. Another fire truck was here and there and then we moved one around here. So just ideas of what you could do with this. And of course, you could real time when you add stuff, upload that to your own personal server, which can then be linked to other devices. So I could have a thousand people looking at this application and I could be adding stuff and within seconds, if not immediately, it goes out to all their devices. So that's just a thought. Anyway, thank you for watching this. Again, I hope you're enjoying the series. If you enjoyed this video and the series, be sure to like, subscribe and share. As always, I hope that you visit my website, filmsbychrist.com, that's Chris of the K. There should be a link in the description and be sure to check out the rest of the playlist if you haven't, and I hope that you have a great day. Okay, this is an introduction to filmsbychrist.com. I'm Chris, that's Chris of the K. That's me right there. My daughter, Amber, and my wife, Jennifer. We pretty much live in the swamps of Florida. I'm a firefighter by day, as well as by night. We work long hours. So that's not why you're here. You're here about the videos I put up on YouTube. These videos are mainly about computers and programming, which means most of my videos look something like this. And if that's what you're interested in, great. If not, that's all right. I do videos on other topics too, such as video editing, special effects, photo editing, 3D design, and music creation. If you are one of my viewers and you enjoy my videos, my Patreon page is a place where you can go to help support my videos. So I ask that you take the time to go to my Patreon page and look at different levels of rewards you can receive for different levels of backing. There should be a link in the description of this video if you were watching it on YouTube. Otherwise, you can visit patreon.com forward slash metalx1000. And I thank you for your time and your support. Have a great day.