Google Maps JavaScript API Episode 1 - Displaying a Map

hey everyone welcome to my javascript maps api tutorial series where in this series i'll be teaching you everything there is to know about adding google maps to your website so i'm going to be teaching you things from such as customizing to make your own personal google maps whether it be through code or google cloud console i'm going to show you how to add markers information windows your own personal symbols polylines everything we'll go through all of it in this series but before we begin this series let me give you an official definition of what an api is an api or application programming interface is essentially software that we want our software to communicate with or you can say an api is software that has some functionality we want to integrate into our own software so in this video series we are going to be communicating with javascript maps api which is an api provided by google that allows us to add google maps functionality to our website or basically add google maps to our website but to interact with google's apis we need to use the google cloud platform so to get started let's go to the google cloud google cloud platform which can be found at cloud.google.com so cloud.google.com and if you don't have an account then you should of course create one but i've already created one so i'm just going to go to go to console but so the google cloud platform is this here what it essentially is is a website that lets you build and deploy applications and websites on the same infrastructure as google in other words the google cloud platform is where we can set up our websites to use the function the functionality that google software possesses and now there's a lot going on here which i'm i'm not going to go over all this i might make a separate series just on the whole google cloud for um google cloud platform in general but for now i'm just going to show you how it works with our java javascript maps api but so if you want to use the javascript maps api you must have a billing account enabled and essentially a billing account is essentially just a credit card registered to your profile to make sure you aren't a robot and don't worry about being charged though as you will have a free trial account and won't be charged unless you upgrade to an actual account so you need at least one billing account before you can start using the javascript maps api so the first thing we need to do is go to the navigation menu and then select billing so the navigation menu so the navigation menu is this up here and then what we're going to have to want to look for is billing which seems to be right at the top so we click on this and then if this is your first time in the google cloud platform your screen will look different than mine but it will basically be a button saying add billing account or something similar so click that and follow the steps but it is important to know that projects that are not linked to an active cloud billing account cannot use google cloud or google maps platform services this is true even if you only use services that are free but also to offset the initial usage cost google offers a 300 free trial and so this free trial applies toward the first billing account you create so i've already created mine here but you can even see the 300 dollars right here for the free trial there's also amount of days you have i think you have 90 days until you will be given the option to upgrade which is where you can start paying but there are also some sort of benefits where you can have like 200 um a month just to use it and stuff like that i'll leave a link in the description of more information on that if you're curious but once again to offset the initial usage cost google cloud offers a 300 free trial and i've been using this a lot you can see i haven't even made a dent in this and then this free trial applies towards the first billing account you create and this free trial ends either after the 300 is spent or the trial period elapses so you can see i have 56 days remaining out of um when i first created my first billing account but now let's go create a project so to do that we're going to go back to the dashboard by clicking this here and basically a google cloud project organizes all your google cloud resources more specifically it consists of a set of users a set of apis billing authentication api monitoring settings you'll see more of this as we go on through this series but so you can add multiple apis to a google cloud project but of course right now we are just adding one which is the javascript maps api so to create a new project what you're going to do is you'll have this drop down here for some projects you have you can see i already have two just that i've been using to practice but what we're going to want to do is we're going to go to create new project which of course is new project right here at the top and then we're just going to give our project a name i'll say javascript maps api tutorial series and then for organization i'm just going to leave it as no organization and basically just know that an organization represents something such as a company and if we supplied an organization it would essentially be the parent of our project but not going to go too in depth on that and then let's just click create right here between four and thirty characters drama has api tutorial is that less than 30 there awesome and now what we need to do is enable the maps javascript api for the project we created and then retrieve an api key and more on the api key later but first let's enable our api so let's go back to our navigation menu here what you're going to want to look for is google is google maps platform so i have it here this is because i pinned it if it's not pinned it's probably way down at the bottom here somewhere so you might have to scroll like you can see it's all the way down here other google solutions but we want to click on that and then go over here and go to apis and so all these apis here are actually you can see i already have this enabled so let me switch this i'm this is because i'm in a different project if i go over this is the one i just created so let me click on this and now this looks better so this should be probably what you will be seeing but these are right here are the apis that are part of the google maps platform so i'll be making a video on these apis as well in the future but for now we're going to be working with the maps javascript api so what we want to do is click on this once again this of course for adding google maps to your website so you just want to click on this to enable it and then to enable it of course we just select enable and of course this may take a bit of time so just some patience now you can see up here we have enabled apis and you can see other apis that we can use but i'm not going to be going over those in this series but um probably in another one in the future but now what we need to do is generate an api key and an api key is used to identify the project your application or website that is calling or requesting something from the api so essentially an api key is used to let google know who is requesting information from them however this api key not only authenticates requests associated with your project it is also used for billing purposes and this is why it is important to protect your api key as if others are using it they are technically pretending to be you and thus it will charge your billing account and more on this in a second but for now let's uh just generate an api key so what we're going to do is we're going to go to our navigation menu again and then we're going to click on apis and services so this here and then we're going to click on credentials and then what we're going to want to do is click create credentials here at the top and then select api key and now you can see we have our api key that has appeared here and now let me just go over some api key security so i'm going to click restrict here so if you are going to use your api key in a live production website you need to restrict it or else anyone can get the ip the api key from your website source code and use it which would of course cost you money because they're pretending to be you because remember an api key essentially represents your project so i would not recommend embedding your api directly in your code instead i would store it in an environment or environment variable or file outside of your website sourcetree but on the other hand google also provides some application and api key restrictions we can use to reduce compromising our api key so by default api keys are unrestricted and unrestricted essentially means or unrestricted keys are insecure because they can be used by anyone from anywhere so you can see here that you can restrict your api key with application restrictions and also api restrictions so application restrictions specify which websites on myp addresses or applications can use your api key and on the other hand api restrictions down here specify which apis can be called using the api key so you can select all the apis that your api key should be allowed to access and for this series i'm not going to for this series i'm not going to add any of these restrictions because it's mainly just for tutorial for tutorial purposes or educational purposes but just know that if you're thinking of making your website live you should definitely read up on restricting your api keys this is something that's important to have a solid foundation on but for now let's just um click save to save your api key you can see we have it listed here i'll get a little warning saying that it's unrestricted of course um because we didn't add any restrictions but now we can actually start working with the javascript maps api so i'm going to be using visual studio code so i'm going to be using visual studio code for this series so what i'm going to do first i'm just going to create let's do video one.html i'm going to have an html file for each one of these videos close this open headers and i'm going to use a shortcut or let me make this text bigger too for you to see i'm going to do a shortcut where i just add an exclamation mark and press enter and you can see we have our basically our skeleton set up for this project but so i'm not sure if i mentioned this already but the maps javascript api lets you customize maps with your own content and imagery for display on web pages and mobile devices so the first thing we want to do to start working with this api is we want to have a div to hold our map so i'm going to add a little space in here i'm just going to create a div tag i'm going to assign it the id of map and also what i'm going to be using to run this is it's an extension on a vs code called live server so if you just look up live server like this find this and just install it you can run it the same way i'm doing it but what i'm going to be doing is with that extension i just right click and open with live server and so you can see we have our document here so i'm going to move that on that side and this on this side and so we can see everything updating in real time but also something to do with this is i'm going to be centering our map so we want to center our map in our screen for this tutorial series and we're going to be doing that with flexbox so the way i'm going to be doing that so basically right now i'm just setting it up so it looks nice when we're working with it but i'm going to do an id container and i'll go over this in a second and wrap our so this is going to be where our google map is going to be loaded into and this is a container we're going to use to center it and now what i'm going to do is i'm going to be adding some style tags so to style our container a style in here and this is going to be let me do a little comment this is going to be the container to center the map and what we're going to do is use our id of container and we're going to give it a height of 100 view height so it's the size of this screen here we're going to set display to flex we're going to do justify content to center so what display flex will do is it'll make this a flex item which essentially means we can use properties such as justify content to center this because justify content will center this horizontally so in this direction it'll center it and then we're going to do a line items center which will center our map vertically so it'll basically be right in the middle here and then next let's style our map and we're going to do height of 80 view height we're going to do width of 80 view width and then also some things i'm just going to do um just to get rid of some default margins i'll do html and body and i'm gonna do margin of zero and padding of zero and to make this actually look like it did something let me do a background color real quick of red and so you can see this is going to be our map within here and it's centered and everything because of our container but so that's just to give you a view of what it will look like but so let's get working now and actually adding our map and now to actually load the javascript maps api we need to use a script tag so let me just make a script tag real quick and i'll post the exact script tag that you use in the video description so you can easily copy and paste it but now let me just type out the url that we're going to be using and then i'll go over in a second so in this script tag right here you can see the source attribute of course represents where the script is loaded from and here it is the url where the maps javascript api is loaded from including all the symbols and definitions that we will need to use the google maps api and you can also see that this url has two parameters which are seen after the question mark we have one here which is key and we have another here which is callback and so the first is key which is your api key and the second is callback which where you specify the name of a function to be called once the maps javascript api has loaded completely so what we're going to do is we're going to make a function called init map and pass a reference to it a reference of it to the url so i'm going to make a separate script tag above here and i'm going to make a function called init map and so this means once we have actually contacted the javascript maps api and we've obtained all the definitions symbols everything that we need to use it this function will be called and so that's why init map is here and this function is called edit map but of course we could you know call this cheese and then we would have to change this also to cheese but convention is just released in the documentation it's always listed as init map and then of course this api key that you pass in here i'm not going to be listing mine because i'm going to have to blurt out the whole series but of course it's the api key that you made earlier on this video that you're going to be pasting in here so let's go back in and so note that we need to make this script tag above the one that loads the maps javascript api so we made this strip this script tag above this one because script tags are executed sequentially and because we are calling our init map function from our javascript maps api url we need to make sure that the function has been created before we load the api so when it's looking for the callback init map we've made it because it's above here but if it was below it would be the program wouldn't know where that function is but now let's create our map object which is going to represent our google maps so i'm going to let map and so the javascript class that represents a map is the map class so if i set this equal to new google dot maps dot map this means this is the map class of the javascript maps api that google provides us and so an object of this class defines a single map which is of course you use the new keyword to instantiate an object from the class and just for the record you can create as many of these map objects as you want in other words each instance of this class will be another google map so we could have like you know like 30 mini google maps on here if we just created like if we did new google maps dot map like 30 times then loaded them we could do that but of course it's not really a point in doing that so for this video we're just creating one map at the moment and now the first argument is the html the html element that we want to contain or that we want to contain our map and so for us it's this div here with the id map so i'm going to do document dot get element by id and the id is map you can see we actually have this loaded here but the reason that it's not loading anything is because my api key isn't specified so what i'm going to do real quick actually is move this into a separate file and load it in here just so i don't have to keep blurring out my api key the whole time cool so now i'm what i'm doing is i'm making this from an external file you can see we got rid of that error message but still we don't have the map showing up and that's because we need to work with the second parameter that this method or the constructor for a google maps object takes what that is is it takes an object of the type map options and this options object requires two keys center and also zoom so zoom right here is an integer that represents how zoomed into the map we want to be when it's displayed so for this i'm just going to do like i don't know 12 and the possible integer values range from 1 to 20 where one is zoomed out as far as can be which is essentially a view and five is land mass and continents 10 is cities 15 streets and 20 is like really zoomed in like buildings but so yeah let's just start off with around 12 around the center and then the key center here is the latitude and longitude of where we want to center our map or where we want the center of our map to be and the javascript maps api comes with the class lat long to get this done so we can pass as new google dot maps dot long like this so this is essentially another google maps api object you can see we have map over here and now we're using latitude and longitude and of course what this takes is the latitude and the longitude of where we want the center of our map and we are going to center our map over the city of chicago for most of the series because i like that city and so where that is is the first is the latitude which is 41.88 on and then the longitude which is negative 87.623177 and so let me save this and then of course what we have to do is pass this map options object to our map constructor so i'm going to pass in map options save it and there we go you can see we have the google map that has appeared and also just real quick even though javascript maps api provides us with the latin long class for providing coordinates we can also directly provide an object with the keys latin long and this is seen as the same thing so let me show you we could do like lat and then 41.8818 um 1832 and then we could do the key long and then minus 87.623 one seven seven let me save that and you can see we get the same thing and so of course let me show you if we zoom out to one you can see we get a world view if we do 20 we get really zoomed in so we go back to 12 and then of course if we change the latitude and longitude you can see we jump around so that's pretty cool and then real quick let me also just show you how you can create multiple maps so say we had just another div here let's do the id of map two and let's do some internal styling so i'm gonna do style height tuner pixels with 200 pixels that so that'll be down here let's see what happens let's just create a second let's do map to equals new google.maps because even though like you can like most you know websites and everything only have one because you don't really need multiple it's just let me just show you how you can have two because why not let me so take all this and put that in here but instead of map we're going to be getting map2 and let's make a map options too as well so i'm going to take this name this map options 2. let's do this as like 48 and let's see does that show up yeah awesome so you can see we have another map here fully functional we can move around you can see things we can change labels satellite change it to terrain of course we're going to be going over how to customize all this stuff as we work through the series zooming in and out so this is basically just a taste of what we're going to be doing in this series we're going to be learning everything there is to learn for now though let me just get this back to normal remove that div and here we are but so this was my video on the javascript maps api and just getting the map set up in the next video we're going to be going over different types of maps so how to create your own custom map like say you can make a halloween theme or a christmas theme or something like that and also like how you can disable like um things options up here like make um you can't you can make it so it's not satellite or not train disable those so that's what we're going to be doing over the next video if you have any questions let me know but i look forward to seeing the next one so thanks for watching

Channel: WittCode

Views: 1,410

Keywords: wittcode, WittCode, javascript maps api, JavaScript Maps API, JavaScript Google Maps

Id: Ad7bS3g87ds

Length: 23min 12sec (1392 seconds)

Published: Mon Sep 27 2021