 Okay, this is part of a series of videos on maps and locations. The first five or six were on command line, shell tutorials, just getting GPS locations, addresses, maps, static maps, and street views. Today we're gonna start working actually with interactive maps. Instead of just a still image, we got maps that you can drag around and also place markers on. So that's what we're gonna do very simply here. So let's go ahead and look at the code here. And as you can see, it's not very long. The entire thing is 47 lines. A lot are just standard tags and some CSS. So let's go ahead and look at it. We're saying, okay, this is an HTML file. We got our HTML tags, our header tags, some meta stuff. It's definitely important for mobile devices. The title of our page and then styling. Basically, we want, as you can see, our map to be the entire screen. You can have it just be inside an element on the page. We're going full screen here. So we're saying zero margin, zero padding, and the entire height, 100% of the page. We're saying our entire page body and the map canvas to that. Okay, and then we're gonna import some JavaScript. This is using some JavaScript by Google for their Google Maps. Now, as I've said in previous videos, all my code right here is up on GitHub. It's free, open source, but we're gonna be utilizing in this one not just a service, but some JavaScript written by somebody else's eyes. So be aware when you're using code that isn't completely free and open, there are gonna be limitations. There are gonna be restrictions. There are other sources out there like open street maps. I have not messed with much. I just think Google does the best job of maps. So that's what I utilize. So just keep that in mind. So then next, we have the main portion of our script. This is mainly what we're gonna be looking at today, and then one line inside our body here, which is basically an empty div tag with an ID of map canvas. So what happens when our actual code loads? We're gonna create some variables here. X and Y, that's gonna be our GPS locations, our latitude and longitude coordinates that I just made up there in town here by me. So those are variables, and then we're gonna send another variable object. We're gonna say a new Google Maps object. This, anytime you see Google Maps in here, this is grabbing it from this JavaScript up here that we imported. So we're saying a new Google Maps, we're gonna create coordinates that are latitude and longitude based on these two. So technically you could grab this and put it in here with the X's and here with the Y's, but it's always good to, this is a simple code if it got more complex, it's a good idea to have things in separate variables like that. We have a function here, but before we get into that, let's look at this line down here. We're saying, okay, the Google Maps event, and we're gonna be listening to, are we listening to? We're listening to the window and waiting for it to load. Once the window, once everything is loaded, what are we gonna do? We're gonna run this function called initialize, which is our function up here. Again, you can call whatever you'd like as long as these two are the same. So once the page is loaded, so it's the same, once the page is loaded, run this function and this function. First thing in here is we're creating a variable, this variable we're calling map options, and we're gonna give it information in a plain text, JSON format, there's three items in here, the zoom amount, where the map is centered to, and what type of map it is, which in this case we're gonna say roadmap, but you can say other things like hybrid, street, or not street view, satellite view, terrain, I'm not sure if there's others, those are the ones I'm familiar with. Now, out of the three things we're passing it, really the only one you really need to tell this is where you want it to be centered. Zoom, there's a default zoom, I'm not sure what it is, but it's probably somewhere around 15, and then there's a default map type, which might be the road maps. So technically I could leave that out and it probably would be about the same. So, we're passing it three bits of information here, but the only one that we really need to tell it, that's really of great importance for this, is where we want it centered. Next we're gonna create a map object, again it's gonna be a new Google Maps object, and it's gonna be a map object. You can have multiple maps on a page, so that's why we're saying we're creating a new one, and we're gonna call it map, and what we're gonna do is we're going, we're gonna create the map object, we're gonna create it in our element down here, which is an empty div tag, again with the idea of map canvas. So we're saying look at our document, that's our entire web page, find the element on the page that has the ID of map canvas, that's this right here, and then what we're gonna do, we're gonna put the map there with these options, we're the options, that's as map options, that's this variable here, it's this information right here is being placed right there. And that's it, that will create the map and center it at 15% zoom on your coordinates with a roadmap style. Now we're gonna place the marker, that's the next thing this next little bit does, there's two parts here, first is just a little variable here saying look for this image, now I'm giving a link to an image that's offsite, it's not locally stored, you know obviously it's probably a better idea to put your images with your application, but I'm just grabbing one offsite and as you saw from when we started it, it's this old picture of TuxPlay guitar, it has the blacks or the white square around it because it's not a transparency of the background, if you choose an image with a transparent background, it will be transparent here, which would most likely be a PNG, JPEGs aren't gonna give you that transparent background, but I chose that image, so we're just gonna say put that information into this variable called image. Next we're gonna create an object called, we're gonna call it marker, again we're gonna look at our Google JavaScript and we're gonna use its function to create a marker and we're gonna give it some information. The position, where do we want it centered? Where do we want it placed? And we can give it separate coordinates, we can have multiple markers, but in this particular case I want it centered right at the center of where our map is centered, which again is our variable up here called centered, which is these coordinates, so that's why we're placing the variable centered there. Again you can type the coordinates directly in there if you would like, but you would wanna run it through this function first, but that's the position, it doesn't have to be at the center, that's just where I'm placing it. Which map are we placing on? We're gonna place it on the one called map, which we created there, so this is equal to that. Next we're gonna say icon, now icon we're passing it image, the variable image right here, which is this URL to an image. You could leave that out, you can say you don't have to tell it what icon you want, if you leave it blank it's going to default to one of those standard little red bubble icon pointers, markers that you see on Google Maps. So giving it an image and this line here, that's just giving it a custom image. If you leave those two lines out, that and that, it's just going to default to a red marker. And that's it, that is our entire code, it's not very long at all, our main function here is not even 20 lines, and that gives you a completely interactive map with an icon, marker that you created, be conscious of how big that icon is, because if you give it a big icon it will be that size on the page. You can zoom in and out and it scales, oh, my last video is done, it's being saved, next one's starting. You can zoom in and out, like so, and you can switch the satellite view and everything as well, and that marker will stay where it's set to. Very simple. Again, all the code in this series is on my GitHub page, if you go to github.com, Ford slash Metal X 1000, the repository is called Maps and Locations, the first part of the series was these bash scripts, these shell scripts, next set that we're doing currently is under the HTML folder, this one was called Place Marker, there's the code right there, and that's it, you can get the code there, remember my code is free and open source, but we're also utilizing the Google code right here, which is not necessarily free and open source, it's free, it is in cost for you to use, but there are restrictions, keep that in mind, look over the Google information on that if you want to use this in an application. I hope that you enjoyed this tutorial, please visit my website, filmsbychrist.com, that's Chris Decay. If you did like this video, be sure to like, subscribe, and share, that helps out a lot, getting more views when you share it for me, and as always, I hope that you have a great day. Okay, this is an introduction to filmsbychrist.com, I'm Chris, that's Chris Decay, that's me right there, my daughter Ember, 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, but 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 are 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.