 Again this is part of a series of videos working on maps and locations and we've been using the Google APIs for their maps to do different things and get interactive maps. Now again all the code that I'm creating is up on my github site github.com forward slash metal x1000 the repository is called maps and locations and if you go there you can find all the code that we're looking at in this series. Again all my code is free and open source but do realize that we are using not only a service but some code that is created by somebody else that has restrictions and always keep that in mind when something's not completely free and open source that it's going to have limitations and just want to throw that out there. Okay so here we've created a map full screen map here we centered on location and we drew two circles here as you can see I've got a red circle that's a little translucent with a dark red ring around the outside of it and a blue circle with a darker blue around the edge there. Let's go ahead and look at the code and again this is part of a series there should be an annotation on the screen to the full playlist or hopefully in the description a link to the full playlist be sure to check that out. My website is Filmsbychrist.com you can also search all my videos there and we're building on stuff here so hopefully you've watched the previous videos. Again basic basic HTML set up here all anything we really have in our body is this empty div tag with an ID of map canvas. We have a few variables up here setting our location and down here we're saying okay Google Maps look at the window basically the application once everything is loaded then run the initialize function same stuff we've already done initialize function is here we're going to create the map by creating some options the zoom where it's centered what type of map it is then we're going to actually create that map object same stuff we've done in the last three videos but now we're going to create two more objects first let's create the options for those objects those are our circles here we're gonna say okay circle options we're gonna say the stroke color the opacity of the weight the fill color and the fill opacity what map it's going to go to where it's going to be centered and its radius so here we go the stroke color is the color of the outline the circle here okay the darker outside and the reason it's darker is because we have the stroke opacity set to eight or sorry point eight one is full it's it's blue you know I said blue here but you can give it other basically any color you want I'm saying point eight so it's not a hundred percent solid one would be solid point is eighty percent solid it's it's somewhat see through although it's still fairly dark you know if we zoom in on it maybe you can see it still looks pretty solid to me so that's up to you on how you want that to look but that's why I said that to you and the weight is is also has to do with the thickness of the line so one would be thinner you can see it's fairly thick line you can make it thinner if you want that's what the weight is now the fill color is obviously the fill color which is the same color but I set the opacity much lighter and that's why it looks like a lighter color and you can actually see through it better the lower the opacity the more you can see through that color what map we're putting it to where we're centering it and the radius this is in meters is the default I believe for Google now we're gonna say okay we're gonna say that's the the options for the circle now we're gonna create the circle object and we're gonna say okay use the Google Maps script that we imported create a circle with those options that we just created do the same thing again for a second circle this one's gonna be a red outline same opacity same stroke weight again the fill is gonna be red but it's a much more opaque you can see through it the opacity is much lighter which map where it's gonna be centered centered I'm using the variable for center here so the map centering somewhere and both circles are gonna be centered at the same location but the radius isn't as wide so it's only gonna be 300 meters that's why it's smaller than the other one so from the exact center we've got 300 meters here and another 200 meters going out so that's basics of drawing a circle there now I'm gonna show you another quick script here called place circle starts off the same we can zoom in here and we can look at the code for that and it looks the same but I added a small function and an event listener just like we were placing markers in the last tutorial I believe it was we're gonna say when you click on the map you know get that location and then move zone and here it's going to I create a little loop that loops through all the circles because instead of just creating a circle I'm actually pushing them to an array so I can loop through all them so they're all always centered together so what this does is okay we have the default location where we place those circles but now I can click and move that circle to other locations and practical use for this you know there's lots of things you can do but again if you've watched my videos for a while you know my day job is a firefighter so that's where my mindset is when I'm writing stuff like this we use I was gonna say we use maps a lot but really we don't but really we should we could utilize maps a lot more but unfortunately my department does not but I write a lot of these scripts and post online hopes that other fire departments will come to the conclusion that they can download and customize my code for their exact needs but when you have an incident especially if it's a hazmat incident you have a chemical spill of some sort or maybe a propane leak you want to evacuate a certain area and there's there's books that we look up you know based on what type of chemical it is you know what the wind is like how big of a radius you want and it's not always a perfect circle because it's whether it's downhill or uphill but we could use circles this to get a general idea we can say okay let's say that right here this house had a truck crash in front of it and there was a chemical spill I could click on the circle there and then I could have either boxes input boxes that I can enter you know how many feet or meters and the script can do the calculations that I want my red zone you have three zones you have a hot zone a warm zone in a cold zone hot zone is you don't want to be in there unless you're fully protective gear is on warm zone is where you kind of you're coming in and out you go there to clean off your gear so you can get out or you you know you still want to be protective in there but that's kind of where you're getting washed up on your way out and then you have the cold zone which is anything past that that's that's safe so you could have three circles and you could put in the numbers up there and it would adjust size and you can click where the incident is so I can click here or there and adjust that accordingly and you can have an overview because you know who goes oh it's supposed to be this many yards or meters or miles or kilometers that I'm going to be clearing out how far is that you can guess you can say oh these are quarter mile blocks but it be nice to be able to just put in that information click where the incident is and be like okay we need to move everybody that's inside this red circle out you know so that's my thought on real-world application for something like this so this is me starting to work on that be able to move the circle the next would be very simply to adjust the sizes whether it be with a scroll bar a slider bar or some sort of input where you type in or both that coordinate with each other so those are my thoughts I hope you enjoy this tutorial as always I hope that if you did enjoy this tutorial you like subscribe and share this video I hope that you visit my website filmsbychrist.com that's Chris the K there should be a link in the description and there you can search through my videos or you can search them here on YouTube and as always I hope that you have a great day and if I didn't mention all this code is up on github my username is metalx1000 and the project is called maps and locations I hope that you have a great day okay this is an introduction to filmsbychrist.com I'm Chris that's Chris the K 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 we 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 four 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