Google Maps JavaScript API Tutorial

[Music] hey guys I've had a few people ask 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 not very well put together so I want to do kind of a no 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 we're going to make it so that we can have custom icons for our markers if we want we're going to add pop-up overlays and so on alright 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 12-week design and development boot camp intended to get you a full-time job in the industry to learn more visit dev mountain comm or click the link in the description below alright 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're also dealing with the JavaScript API there's a lot of different services a lot of different API is you want to make sure you're using the JavaScript one all right and then if we go to create map with a marker 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 how to get started so I figured I would just you know kind of go and 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 map API script you need to have an API key alright so to do that we're going to go to our Google API console which is console developers.google.com/maps so let's say create project and for this I'm just going to say test project and click create alright and then this isn't just for maps this is for any any Google API geocoding you know YouTube video api's things like that so let's go over here and click this and go to let's say we want to go to dashboard and if we click on enable API these are all this this is all the stuff we have to choose from so we can work with Google Docs and Gmail and Google+ social social networking API is all this stuff analytics what we want is right here Google Maps JavaScript API so we'll click on that and then we're going to say select project and let's 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 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 ok 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 alright so there's our key there 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 Adam which is the text editor I'm using and I have 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 Emmet so I can use shorthand like if I wanted to do a div I could say div tab that'll give me 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 Emmet alright and then I'm also using a package called atom live server which just opens this file up on my localhost 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 localhost alright 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 Emmit packages and you want to install this here all right and then if you want this the live server just search for atom live server packages and you're going to want this one here by jazz chen okay so those are the two plugins that I'm using but again you don't need those you don't need to use atom use whatever you'd like alright so with Emmet I can just do an exclamation and then tab and it's going to give us kind of an HTML structure so just a save some time and I'm just going to change the title here we'll just say my google map alright 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 you can make this really small because everything is responsive and I'll just make this a little smaller alright 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 an it map so it's going to try to load a function called init map so what we'll do is put in another set of script tags right above whoops and in here we're going to have to put our function okay we're going to call it a knit map okay now we're going to need a place in the HTML to dump our map so if we look at 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 just the plain dip 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 dot map and that's going to take in two parameters one is going to be the the element that we want to dump it in which is the idea 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 save our options oops and set that to an object and then here we want to put our zoom level which I'm going to set to eight I think the max is like fourteen or something like that we'll check that out and then we also need the center okay wherever we want to Center this now right here they put it in a variable called ul you our view 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 our 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 alright so there's our options now we need to create the map object so let's save our map equals and then we can do new Google Maps dot capital ant map and remember that takes in two parameters one is going to be document dot get element by ID and it's going to 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 width to our okay so it has the idea of map so let's go in the head here and say style and say idea of map and we're going to set the height to 400 pixels and then we'll set the width to a hundred percent 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 to save that you'll see it zooms way out if we go let's say zoom 13 you'll see it goes away into the city all right so I'm just going to keep it at 8 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 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 let me just add some comments here as well so this is the map options and this is we're saying new new map and then here let's say add marker so we'll do variable marker so that's a new Google Maps dot marker alright and then this is going to take in an object with a position of where we want to put the marker and I'm going to grab the position for let's say Lin mass which is the city that I was born in alright 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 counter parameter but 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 it's just do that alright 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 alright 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 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 I think it's icon and then I'm just going to grab a link here to 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 images slash your Beach flag so if we save that you'll see that the mocker has 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 may be you know to mark a beach like we're doing here or to mark a restaurant things like that mosquito in here 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 pop-up with some text or some content so for that what we're going to do is go under the mocker and we're going to do we're going to create a variable called info window and then let's set that to new Google dot Maps dot info window alright and then that's going to take in an object with the content that we want so I'm just going to put an h1 here you can put HTML and I'm just going to say Len 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 to listen for that info window so right under it let's take marker dot adlistener 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 our pop-up window with the h1 all right so that's kind of cool so that's basically how you can add you know single marker with 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 cut I'm going to comment out what we just did I'm going to keep the options in the map and then just comment out the rest which is down to here alright and then we're going to just do things a little different so the first thing I want to do is I want to have a function called add marker where we can just pass in values and we can then put the dynamic values here instead of hard-coding it alright so let's say add so add marker function so function add marker alright and then let's make that take in the coordinates so we'll say chords all right and then let's copy this where we actually created the marker and we'll paste that in and instead of this being hard-coded we're going to say chords ok 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 alright so we have this add marker function we also want you know what let's not do the infowindow just yet let's just go ahead and call this ad marker function and let's grab the location this right here are the coordinates and tap 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 aims very mass which is where I live now just copy that paste that in and we'll grab this one that save it let's go back and I see we have two markers okay so let's add another one we'll say I don't know two Haverhill so grab actually let's copy this and paste that in here grab that Oh got the floor on that one and now we should have three so we can keep adding markers alright now what if we wanted to have custom icons for certain markers so what we would do here or what I would do this oh there's a lot of different ways to do stuff like this 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 alright and chords will be one of those properties so what we'll do is let's go in here and stay chord with chords : and then that's going to be its own object we have to add another one over here another curly brace that should be chords alright we're going to do that for all of these looks it should only be one there okay alright 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 value of chords so right here what we'll do is just do props dot 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 a comma and then let's do we'll just say icon image alright and then let's grab this copy that put it in there and then instead of doing this hard-coded image we'll do props dot icon image alright now we're only putting it in the first one which is Lin mass so that should only be the would be 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 a standard you know standard map icon or marker and then Lin has the the beach flag okay now this isn't really a optimal because since we're not inputting I con image into either of these it's it's undefined so it's actually setting icon to undefined and that's you 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 add 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 images there so let's say if props dot icon image then we want to set the image and we can do that by taking that marker and saying set icon and then we want to set it to props dot icon image let's put a comment here say check for custom icon and then we'll say set icon image save that and now you can see it's the same thing but 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 landmass 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 put in for that particular location so let's say check check content so say if props dot 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 put that in and except we don't want this hard-coded value want this to be the props dot content that was passed in all right so let's save that and now if we go and click on this one here you see we get our pop up 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 aims very so now if we save that and we go click up here you see we get the aims very mass alright so hopefully this is making sense to you guys I mean you do have to have a little bit of knowledge of JavaScript to really grasp what's going on as far as you know JavaScript objects so let's see what else I want to do now I don't want to have to call this add marker like this so three different add 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 one second all right so let's create an array of markers okay so we'll say var I'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 curly braces and copy that paste it in alright then we'll put a comma and let's grab the 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 markers dot length okay and then we just want to do I plus plus which will increment it by one after every iteration so what we'll have to do here is just take add marker paste that in like that and see and then all we have to do we don't need to pass in a single object will 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 and this one this one 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 a 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 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 or actually let's go up to the top right under where we created the map so we'll say add I will say listen or click on map so to do that we're going to do Google dot dot event dot listener or I'm sorry add listener okay and we want to 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 add marker takes in properties object right so we'll pass in 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 will 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 because it goes and add the marker if I reload they're going to be gone and they're not getting saved in the database or anything that's something that maybe we could do in a different video but I think that that's going to be it for now so just imagine if you had a forum 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 can make it so that when you click on in a form opens you can edit the information 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 back-end stuff I just want to give you kind of an introduction to some of the things that you could do with the JavaScript API all right so hopefully you I enjoyed this video I know it's a little different than what we usually do but you know I like to try to fulfill as many requests as I can so thanks for watching and I will see you next time

Channel: Traversy Media

Views: 874,532

Keywords: google maps, google maps api, google map api, map api, google map tutorial, maps api tutorial, maps api javascript, javascript api

Id: Zxf1mnP5zcw

Length: 27min 27sec (1647 seconds)

Published: Mon Jun 12 2017