Google Maps JavaScript API Tutorial

Key Takeaways

[Music] hey guys if had a few people asked me to do a video on the Google Maps API and I thought that was a pretty good idea because there is a lot of info out there there are a lot of videos but most of them are really old and um not very well put together so I want to do kind of a non-nonsense guide on creating a map adding markers we're going to organize the code so that we can easily add markers to an array um we're going to make so that we can have custom icons for our markers if we want we're going to add popup overlays and so on all right so that's what we'll be doing in this video let's go ahead and get started this video is sponsored by Dev Mountain if you're interested in learning web development iOS or ux design Dev mountain is a 12we design and development boot camp intended to get you a full-time job in the industry to learn more visit Dev mountain.com or click the link in the description below all right so let's go ahead and get started now I have the documentation open for Google Maps which is developers.google.com/maps 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 so we're going to click on that and we we're also dealing with the JavaScript API there's a lot of different Services a lot of different apis you want to make sure you're using the JavaScript one all right and then uh if we go to create map with a marcker we're not going to just we're not going to strictly follow this and you know copy all the code exactly but it gives you a good idea of of how to get started so I figured I would just you know kind of go kind of keep this open as we go along now in order to use this if you look down here when we actually include the the map API script you need to have an API key all right so to do that we're going to go to our Google API console which is console. developers.google.com and you're going to have to have a a project so let's say create project and for this I'm just going to say test project and click create all right and then this isn't just for maps this is for any any Google API geocoding or um you know YouTube or video apis things like that 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 these are all the this is all the stuff we have to choose from so we can work with um Google Docs and Gmail and uh Google+ social social networking apis all this stuff analytics what we want is right here uh Google Maps JavaScript API so we'll click on that and then we're going to uh let's see select project and uh let's see select and we're going to choose uh test project and then if we go to enable that should enable it and it should give us um give us a key so if we go down to credentials and create credentials we want to create an API key and there it is right there okay so let's go ahead and just copy that 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 all right so there's our key there and we can come back to this page whenever we want so now we can get started on our project so I'm going to go into adom which is the text editor I'm using and uh I have a a folder called my map with an empty index HTML file and that's all we're going to need for this project now I do have a couple plugins installed that I'm using I'm using EMT so I can use short hands like if I wanted to do a div I could say div tab that'll give me um a div tag or I could do ID hello and tab it'll give me an ID of hello so if you see me do that I'm just I'm using EMT all right and then I'm also using a package called Adam live server which just opens this file up on my local host and you don't need this you can just open it up in your file system but I'm going to go ahead and use this so if I go start server it'll actually open it up on a port on my Local Host all right now if you want these installed as well you just need to go to settings and if you go to install and you want to search for First EMT packages and you want to install this here all right and then if you want this the live server just search for adom live server packages and you're going to want this one here by Jaz Chen okay so those are the two um plugins that I'm using but again you don't need those you don't need to use atom use whatever you'd like all right so with EMT I can just do an exclamation and then tab and it's going to give us kind of an HTML structure so uh just to save some time and I'm just going to change the title here we'll just say my Google Map all right and then down in the body we're going to need to put we're going to need to include the Google the Google Map API script so if we go back to that documentation page here and we look at the example we want this here the script tag so let's copy it and I'm actually just going to minimize this and we can make this we can make this really small because everything's responsive and I'll just make this a little smaller all right so let's go ahead and paste that in our body and notice that we need to put our API key in so let's go back to that credentials page I guess this isn't responsive but I'll just scroll over and I'm just going to grab the key here make sure you guys use your own this one will not be valid so we'll go ahead and paste that in now notice that it has a parameter called callback that's set to a knit map so it's going to try to load a function called a knit map so what we'll do is put in another set of script tags right above oops and in here we're going to have to put our function and we're going to call it a nit map okay now we're going to need a a place in the HTML to dump our map so if we look at the the code sample here you'll see there's an ID of map so that's what we're going to do right above the script in the body let's put a div with an ID of map okay and nothing goes in there it's just the just the plain div I'm also just going to put an H1 above it and we'll just say my Google Map all right and then inside a nit map we're going to want to do a couple things so we're going to want to set a variable called map and set it to a new Google Map object 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 we just do do map and that's going to take in two parameters one is going to be the the um element that we want to dump it in which is the ID of map and then some options now I like to put my options inside of a variable so what I'm going to do is say VAR options oops and set that to an object and then in here uh we want to put our our zoom level which I'm going to set to eight I think the max is like 14 or something like that um we'll check that out and then we also need the center okay wherever we want to Center this now um right here they put it in a variable called Uh ulur u uh and you see it's an object with a latitude and longitude I believe that's in Australia what I'm going to do is get the latitude and longitude for Boston which is the area that I live in and we're just going to grab that and then over here let's put an object with lat paste that in and then we'll grab that put a comma here LNG and then we're going to do negative and then pass that in all right so there's our options now we need to create the map object so let's say VAR map equals and then we can do new google. maps. capital M map and remember that takes in two parameters one is going to be document. get element by ID and it's going to have be the ID of map we're referring to this right here and then the second parameter will be the options that we created now if I go ahead and save this and let it reload you'll see that nothing we don't see anything that's because we haven't set a height and a width to our map okay so it has the ID of map so let's go in the head here and say style and 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 now we have a map okay and you can see it's centered on Boston and we can go ahead and change the zoom level if we want so if we were to say like zoom two save that you'll see it's it zooms way out if we go let's say Zoom 13 you'll see it goes way into the city all right so I'm just going to keep it at eight all right so that's how we can get just just the map so now we want to add a marker so to do that if we look at the documentation here we create a variable called Marker set it to uh a new marker and then we put in the position and then the map we want to add it to all right so let's go down here under where we created the map variable and let me just add some comments here as well so this is the map options and this is we're saying new uh new map and then here let's say add marker so we'll do variable Marker set that to new google. maps. marker all right and then this is going to take in an object with a position of where we want to put the marker and and I'm going to grab the position for let's say Lin Mass which is the city that I was born in all right we'll grab that just like we did with the center we're going to do lat paste that in and then LNG and we'll grab that okay paste that in now we have the position and then we need a parameter or um not a parameter but a a value here that's going to be the map we want to add it to which is the map we created right here so let's just do that all right and then if we save and go back you'll see that we have a marker okay we can zoom in and you can see it's on Lin Mass all right now we can add as many markers as we want but for now I'm just going to stick with this one and then I'll show you how we can uh make it so that we can add more in an efficient way now the next thing I want to do is show you how to use a custom icon okay because you may not want this this marker okay so right here we can just add in uh I think it's yeah it's icon and then I'm just going to grab a link here to uh a beach flag icon so let me paste that in you'll see it's at the developers Google site it's in the documentation imagesbeach flag so if we save that you'll see that the marcker is now changed all right now if you have multiple markers you can make it so that you can have different icons for each one or you know some of them maybe you know to Mark a beach like we're doing here or to Mark A a restaurant things like that the helling mosquito in here uh but that's how we can add a custom marker now let's go ahead and add an info window so that when we click on this we have this PP up with some uh text or some content so for that what we're going to do is go under the marcker and we're going to do uh we're going to create a variable called info window and then let's set that to new google. maps. info window all right and then that's going to take in an object with the content that we want so I'm just going to put in an H1 here you can put HTML and I'm just going to say Lin Mass now that itself isn't going to do anything if I save it you'll see it doesn't work what we have to do is add a listener to uh to to listen for that info window so right under it let's say marker dot add listener and we want to listen for a click because we want this to happen when we actually click it and then we have a function that runs okay and then we're just going to say info window and that has a function associated with it called open and then that's just going to take in the map and the marker so let's save that and now if we go over here and click you'll see we get uh our popup window with the H1 all right so that's kind of cool so that's basically how you can add you know a single marker with uh with a custom icon with an info window but now what I want to do is I want to make it so that we can have multiple markers now what we could do is copy all of this right here and then just paste it in for each each and every marker but that's not very efficient we want to do this in a different way so I'm going to I'm going to comment out what we just did I'm going to keep the options in the map and then just commment out the rest which is down to here all right and then we're going to just um do things a little different so the first thing I want to do is I want to have a function called ad marker where we can just pass in values and we can then put the dynamic values here instead of hardcoding it all right so let's say add uh we'll say add marker function so function add marker all right and then let's make that take in uh the coordinates so we'll say chords all right and then let's C copy this where we actually created the marker and we'll paste that in and instead of this being hardcoded we're going to say chords okay um now if we leave it like this every single marker is going to have this icon and I'm just going to keep it like that for now after I'll show you how we can make it make them different all right so we have this ad marker function uh we also want you know what let's not do the info window just yet let's just go ahead and call this add marker function and let's grab the location this right here or the coordinates and pass that in and let's see if this works so we'll save and there it is all right now if we wanted to add another one we could copy this paste it in let's get the coordinates for let's say Asberry Mass which is where I live now just copy that paste that in and we'll grab this one like that save it let's go back and now you see we have two markers okay so let's add another one we'll say uh I don't know let's do uh hail so grab actually let's copy this and paste that in here grab that I forgot the four on that one and now we should have three so we can keep adding markers all right now what if we wanted to have custom icons for certain markers so what we would do here or what I would do there's a there's a lot of different ways to do stuff like this um this is just one so what I would do is I would change it from just entering the chords into this function to entering some properties all right and chords will be one of those properties so what we'll do is um let's go in here and say chord wh chords colon and then that's going to be its own object we have to add another one over here another curly brace uh that should be cords all right we're going to do that for all of these oops that should only be one there okay all right and then down here instead of taking Chords it's going to be a props object which is this entire thing and it has a a value of chords so right here what we'll do is just do props do chords so if we save that that should do the same exact thing now in addition to the coordinates we want to be able to put an image or an icon so let me just bring this down here like that and then we'll put put a comma and then let's do we'll just say icon image all right and then let's grab this copy that put it in there and then instead of doing this hardcoded image we'll do props do icon image all right now we're only putting it in the first one which is LIN Mass so that should only be the the only one with the beach icon so let's save and there we go so all the markers these two are going to have just the standard you know standard map icon or marker and then Lynn has the the beach flag okay now this isn't really uh optimal because since we're not inputting uh icon image into either of these it's it's undefined so it's actually setting icon to undefined and and that's we don't want that so we can set it a different way so what we'll do is comment this out for now and then let's go under still in the ad marker function but under where we created the variable for the marker and we can actually test to see if that parameter is there if that icon image is there so let's say if props do icon image then we want to set the image and we can do that by taking that marker and saying set I ion and then we want to set it to props do icon image let's put a comment here we say check for custom icon and then we'll say set icon image save that and now you can see it it's the same thing but it's it's much it's better because we don't have an undefined value here all right so let's see what else we want to do here let's go ahead and do the info window all right now obviously we don't want the same info for everyone so we have to pass that in as a property as well so we'll go up here put a comma and let's say content and I'm going to set that to an H1 and let's say Lin mass and then down here we're going to do kind of the same thing we did here we're going to check to see if the content was uh put in for that particular location so let's say check uh check content so we'll say if props doc content then we're going to do what we did up here we're going to create the info window and then we're going to add The Listener so I'm just going to copy that let's put that in and except we don't want this uh hardcoded value we want this to be the props do content that was passed in all right so let's save that and now if we go and click on this one here you'll see we get our popup these ones don't because we didn't pass anything in if we wanted to we could take that and let's go ahead and put a comma there and then we'll say we'll pass in the content and I believe this one's Asberry so now if we save that and we go click up here you see we get the asbery mass all right so hopefully this is making sense to you guys um I mean you do have to have a little bit of knowledge of JavaScript to really grasp what's going on as far as um you know JavaScript objects so let's see what else I want to do now I don't want to have to call this ad marker like this so the three different ad markers and then for every single one we want so what we'll do is put all of this stuff all of these properties into an array up at the top all right actually we'll just do it right here so let's create uh one second all right so let's create an array of markers okay so we'll say VAR we'll call it markers set it to an array okay and then what we'll do is grab this one so everything that's inside of these these curly braces we'll copy that paste it in all right then we'll put a comma and let's grab this second one paste that in comma grab this last one there we go and now what we'll do is Loop through this and then for each iteration we'll just call add marker once as opposed to calling it every single time here and filling up our page so for that let's do Loop through markers and we'll do a for Loop and we'll put in here VAR I is equal to zero and then we want to say as long as I is less than mockers do length Okay and then we just want to do i++ which will increment it by one um after every iteration so what we'll have to do here is just take add marker paste that in like that and let's see and then all we have to do we don't need to pass in this single object we'll just say markers and then the current iteration okay so I represents whatever one of these that we're currently on so it'll go it'll do this one then this one this one one and and keep going and then we can just get rid of these three so a much much cleaner way to to do things all right so let's save that and there we go so works the same way but it's much cleaner okay so let's see what else we want to do here let's make it so that when we click on an empty area in the map or click anywhere in the map it will actually create a marker for us now it's not going to create like um you know a Content window or anything like that it's just going to be the image because I mean we could create a form and then do it that way um but that's that's going to that's going to get too complicated I want this to be kind of basic so to do that we're going to have to add a listener we can add a listener on the map to listen for a click event so let's put this right under where is it 's actually let's go up to the top right under where we created the the map so we'll say add uh or we'll say listen for click on map so to do that we're going to do google. maps. event. listener or I'm sorry ad listener okay and we want to uh pass in the map we want to listen on which is you know the variable map and then the event which will be a click and then we want to run a function all right so this function will take in an event parameter and then in here we just want to call add marker okay now remember the ad marker takes in a properties object right so we'll pass it an object and then like I said we can't we're not going to do a custom icon or anything like that we just want the coordinates okay so just chords and we can get that with event dot lat LNG that'll actually get the latitude and longitude of the area that you click in so we'll just say add marker all right so let's save that and now you'll see when I click anywhere it it goes and it adds a marker if I reload they're going to be gone and they're not getting saved in a database or anything that's something uh that maybe we could do in a different video uh but I think that that's going to be it for now so just imagine if you had a form and you could submit that form to a database you could save locations and then when we're calling or when we're fetching this array right here this array of markers this could be stored in a database all right and you could you could update them you could make it so that when you click on it a form opens you can edit the information um so you can do some really cool stuff with this and I'm not like I said I'm not going to get into database stuff backend stuff I just wanted to give you kind of an introduction to um some of the things that you could do with the JavaScript API all right so hopefully you guys enjoyed this video uh I know it's a little different than than what we usually do um but uh you know I I like to try to fulfill as many requests as I can so uh thanks for watching and I will see you next time