How to Code Google Maps Into Your Website with Google Maps JavaScript API

1. Google Maps API - Welcome: Welcome back to the creative Millennial skill set channel. Today we are going to be teaching you how to integrate Google Maps API into your website. I'm joined by a good friend of mine Jacob who previously taught us how to code a website from scratch. He's a software engineer, and today he's going to be taking the class. I'll pasch on to him. Hi, guys. I'm Jacob. I'm a software engineer graduate. And today, I'm going to be talking you through how to add Google Maps integration into your website. This is useful if you're on display at the location or something into your website, and also if you're using any projects that involve adding map integration, and you can do some cool features with the Google Maps and make your project more exciting. So we're going to be using HTML, CSS, and Java scripts to add this map integration into your project. I'll put an example on the screen now what the final project will look like. We're going to start by showing a location on the map, and then we're going to add markers and then add multiple markers and also work out how to customize the map and also adding go coding so you can show specific locations on the map. This is an extremely useful tool for coders, business owners, and anyone looking to add an interactive feature into your project. Let's jump into it. 2. Google Maps - The Set Up: Welcome to class one. In this class, we're going to be talking about what software we need to be able to start using Google Maps integration in the project. So because we're using Google Maps JavaScript API, which lets you customize maps with your own content and imagery to display on web pages and mobile devices, we're going to be using visual Studios, the IDE to be able to to be able to code the HTML, CSS, and JavaScript files. So what I've done here is a created three simple files, an index dot HML file, a map dot JavaScript file. And a style CSS file. Now, to briefly explain these files, the index file will be where our HML code goes for displaying the layout of the web page. The map JavaScript file will be where our JavaScript code will go to be able to deal with actually loading the Google maps. The style CSS will contain the code for displaying how the website looks. So for now this class is intermediate, which means I'm assuming that you have a basic understanding of the HML CSS and JavaScript files and what they mean. But if you're unsure, I want a more in depth of understanding, I have another video on this channel explaining how to build a website from scratch. So to get started with the HML file, I've included a basic HML document which contains a link to our CSS file and also our JavaScript file containing the code for the map. I've created a simple header to give the website a bit of a design and also included a div that contains the map, which will be styled later on. From the CSS, we have basic styling just to give a little bit of style to the website. So we've got the body which will have the background color, the width, and the header which has some slight coloring and some margins, and also a slight border as well. And at the bottom, we have the map styling, which shows the width of the map and the border for the map so that the Google Maps template to set a template for the Google Maps width and height. And we also have a o script file which we're going to be adding some code into later to create the functionality of the map and allow for customization and any changes to the functionality of the map. So now we've got a basic functionality setup. We're now ready to start adding in Google Maps integration into the website. So in the next class, we'll look at how to actually add in the Google Maps integration into the project so that we can start adding the maps and starting to to view the map. To do this, we'll use Google Maps API and we'll show how to sign up for the API and also install the key and irrelevant code into the project. So in this class, we'll look at how to get started with the project and define the base code we needed before we can start adding in the Google Maps integration into the project. 3. Google Maps API Console Guide (KEY): Welcome to class two. In this class, we're going to be looking at the steps we need to take to sign up to Google Cloud Platform in order to get the APIKey so we can add it to our project. The first step is to make a Google account and sign into Google Cloud Platform and then go to the console. You also need to enable bidding into your account in order to be able to use the Google Maps. I'm not going to show you how to do this step, but it's very simple to do and doesn't take much time at all. The next step is to create a project on the Google Clouds Console, which Google will use so that you can add your credentials and API keys to the project. To do this, select your project and click New Project Name your Project and press Create. Once this is done, opening settings and go to API and Services. Click on Dashboard and enable API and Services. The two APIs we're going to use for this project is maps JavaScript API for the core functionality of the map, and also places API to add in a jo location later on. This will be used to convert a location into latitude and longitude coordinates so that the marker can be plotted on the map. So click Maps JavaScript API and enable it. I've already done this step, but you should see an enable API button here. The same goes for Places API. Once you've enabled the APIs, you're able to create credentials and gain an access key so that the Google maps can be used within your project. Click, create credentials, API key, which will automatically generate an API key for you to be used, which can then be copy and pasted into your project so that the maps can be implemented within your project. I'd recommend restricting the key so that can only be accessed by you and the people you want to access it to make sure that no one is using your access key unknowingly and increasing your bills. Because we're building a website, we need to enable HTTP. We can then enable the website restrictions that we want to use. And then enable the URL of the website that we want to use the Google Maps on. Of course, you don't need to restrict the key, but highly recommend it. Once this is done, you're able to copy your API Key, which can then be inserted into the project. Once the Google maps is set up online, you are then able to add the code into your project to get started with the maps. So in your HML file, just add a short script, which contains your key at the end of the URL, and also a callback function, which defines what function in the Javascript file will be used to first set up the map. To briefly speak a little bit about what these symbols mean. The source is where the map is loaded from and will contain the API key and the callback function, which will be used to call the first function for the map when the project loads. The A gets the browser to to download at the same time and execute the script at the same time it's loading the HML. When the script is loaded, it will call the function specified from the callback function. So thank you for watching this class. In this class, we looked at how to sign up to Google Cow platform, enable the relevant APIs and Gain our access key, and gain our access API key whilst also restricting it to ensure that it's only being used for the correct purposes. In the next class, we'll look at to define the function that is first called when the HTML file is loaded, which is used to display the map. 4. How To Display Google Maps & Find Locations!: Welcome to Class three. In this class, we'll be looking at the relevant code needed to add into the Driscriptfile, so we can display our first location onto the map. So as we talked about previously, we have a script here linked to the map dot JS file. Our callback function tells the HML file what function should first be accessed when the page is loaded in the map dot JS file. We have called it Init Map. In the S file, we have defined the function called Init Map. We get the map ID from the HML file and set the center of the map to be displayed. Google Maps does this by using longitude and latitude coordinates to plot the location on the map. We have set the center of the map to be the location of Big Ben. We can also define how zoomed in we want the map to be. Eight is about middle. The higher you have your Zoom, the more zoomed it will be, the less you have it, the more zoomed out, the map will be. By opening the HML file using Google Chrome, we can now see what we have coded. The Google maps is clearly displayed on the screen with Big Ben being the center of the map. As of yet, we've not added markers in, but this will be part of the next class. I'm going to increase the Zoom to give a better picture of what the map is showing. Now that I've done that, you can see that in the middle of the map is Big Ben. The map is interactive and you can drag it around, zoom out view a satellite view. And also drag a marker onto the current location and scroll around. The benefits of dra script is that the map is interactive, so we can engage with this map, scroll around, and also customize the design features of the map. We're going to look at customizing the markers of the map later on. So thank you for watching this class. We've looked at the relevant code needed to enter into our dra script file to be able to clearly show the location on the map and also how to zoom in and out of the map and interact with it. In the next class, we'll be looking at how to add markers to the map so we can clearly plot the coordinates of the location onto the map. 5. Adding Location Markers to Your Map!: Welcome to class four. In this class, we're going to be looking at how to actually add a marker to the map so that the specific coordinates of the location can be viewed on the map. So to add the marker to the project, we only need to edit the maps JS file, so the index at HML and the style at CSS can stay the same. I've made some slight changes to the code. I've used a variable to store the location codes of the point that we want to plot on the map. I then set the center of the map to these location coordinates. The important bit is highlighted here. We want to create a marker for the map. Google Map API has an inbuilt function to do this. We simply set the position of the map to the location coordinates that we want to plot, and then define the map that you want to plot the coordinate on. In our case, we're just calling it map because that's what we've defined the map to be. Once that's done, you're able to see the location Big Ben to be plotted on the map using this red marker here. Of course, it doesn't have to be Big Ben. You can simply edit any of the location coordinates to plot the specific location that you want. Thank you for watching this class. We've learned what code needs to be added to our Java script file in order to plot the marker of the location that we want to display on the map. In the next class, we'll be looking at basic customization of the maps and how we can change the map marker to be an image of whatever we want. 6. How To Add Multiple Markers to the Map! (KEY!): Welcome back to class six. In this class, we're going to be looking at how to add multiple markers to the map so you can view different properties at the same time. Again, we're just going to be editing the maps do JavaScript file, which will be largely built off the same code as the last class. In our allocations array, I've added in more coordinates so that we can plot different markers on the map. In this case, I've got Big Ben, the London and Buchanan Palace in an allocation array, so we'll be able to have three markers on the map. But this is unlimited. You can have as many markers as you want. I've just added in the latitude and longitude coordinates of each of these landmarks in the position array. I've also set the type to info, so it will display an info marker. But again, this can be set to anything you want. To change this, you've just got to set the icons array and add a new icon. To be able to draw multiple markers, we need to have a four loop to loop through the locations array and add every location to the map. As you can see, I've added in a four loop which loops for the length of the locations. So in our case, we have three locations, so it'll loop round three times and draw three markers on the map. I will plot the position of the first location before looping around to the second location and then the third. And for each of these marker drops, we can have the same animation and also the same logo, and these will all be drawn on the same map. So as you can see, when I load the page, we can see the three markers on the map in three different locations. So as you can see on the map, we have three locations, which are three points that we plotted. So the four loop has looped round three times for ever location in our location array and plotted these points using the longitude and latitude onto the map. As you can see, when we refresh the page, The logos will bounce up and down using the animation that we coded as well. Thank you for watching this class. We've learned how to add multiple markers onto the map and also the potential for adding more markers and changing the icons. In the next class, we'll look at how to geocode a location so that we don't have to know the latitude and longitude of every point that we plot. We can instead just have the location, which should then be converted by the Google Map API into longitude and latitude for us so that we don't have to worry about that. 7. How to Customise your Map! (Size, Animation, Logo & More!): Welcome back to this cost, we're going to be looking at slight customizations we can do to the map, and we're going to look at how we can change the Marker icon and also add some cool animations into the project. Again, we're only editing the maps dot JS file. I made some slight variations to the code here. The first one being, we have set the icon base to gain the map image from the Google JavaScript Example library, and then set the icon to be the Info maps image within the library. I've used this as an example, but you don't have to use this library. You can use any image you want, literally any image you want, as long as you defined what icon you want to use. So as an example, have icons here, the marker dot PNG, if I wanted to set that marker to be the marker of the Google Maps. All we need to do is delete this and just set the title to be Mark PNG. You may need to edit the width and height of this marker if the image will be too big. But for now, I'm using Google's JavaScript library as an example. In this section, I've created an array called locations, which will contain every single location I want to plot on the map. Now, I just want to plot Big Ben onto the map. So I've set the position of the Google maps and the longitude and latitudes to the location of Big Ben. I've also set the type of the marker to be Info, which will refer back to this icon base here. I then created the markers, which is largely the same as before. However, I've included the position of the locations array to be Big Ben. And also the icon array to be the info icon, which will give us an info marker. I've also added in some cool animation here to show the marker dropping onto the Google maps to give a cool effect and make the map a bit more engaging. As you can see, the map icon is now an eye shape. As I was said before, this doesn't have to be an info logo. This can be any marker you want. What's cool is because I've added in the animation. When I refresh the page, you'll see the marker bouncing, which gives a cool visual effect. From this class, we've learned how to customize the marker logo and also adding the cool animation to give a nice visual effect to the marker as it drops onto the map. In the next class, we'll be looking at how to add multiple markers onto the map so we can display multiple locations at the same time onto the map. 8. GeoCoding Map Locations! (USEFUL!) : So welcome to our final class class seven. In this class, we're going to be looking at how to take a location and convert it using Geocode API into longitude and latitude coordinates so that these can then be plotted on the graph. This allows us to plot points on the map, applications where we don't know the coordinates of them. This is really useful when you want to plot location on the map and you don't know the coordinates. Instead of you trying to work out a longitude and latitude, you can use the Geocode API to convert the location into coordinates, which can then be plotted on the map. Within the Map St JS file, I've largely used the same codes from just plotting a singular marker onto the map. I've set a location here to postcode lest two ND. But you can set this location to anything that you want to. The Geocode API will better work out this location, convert it, so it can be plotted on the map. The Geocode API is another API separate to the map API. But as discussed in class two, we have already enabled this on the Google console, so there shouldn't be a problem here. So once we have set the location variable, we need to set the geocode variable using the Google Maps Geocode. We then call a function here, which sets the address to the location, which calls this function here, which works out the map address. I put an if statement here so that if the Geocode API cannot locate the load address it won't crush the website. Instead, it will just log the error. If it's successful, the latitude will be worked out for the location and stored in the variable and likewise for the longitude. These variables will then be used as a location coordinates to be used for the center of the map. I've then drawn a marker whose position is set to the longitude and latitude of the coordinates. This can then be plotted on the graph. Whilst we may only be using a simple example here, this has potential to be used for lots of functions, such as taking an input from the user for an address that they want to gcate, converting it, and then plotting it on the map. Using a similar technique to our last class, we can also use a loop here to be able to draw multiple markers onto the map. The location doesn't have to be a postcode. It can be a street name, a city, or a street name and a city and a postcode to give a specific address. This is the same technology that is used when you search for destination on Google maps, and it drops a pin. As you can see, when I refresh the page, it plots the postcode that are defined in a location and draws a marker on the map for this postcode. So thank you for watching Class seven. In this final class, we've learned how to take any location and be at to plot on the graph without knowing the latitude and longitude coordinates. This can be used for any location and can be expanded to be taken locations from a database, from user input, and even drawing multiple markers at the same time. 9. The Class Project!: Welcome to the class project. For this, I want you to use what you've learned in today's class to get the map onto your website and customize it by adding multiple markers exactly like what we've done in today's class. All the code from today's class has been put onto GitHub. So if you get stuck, take a look at the code and feel free to drop any questions below. So by the end of this class project, you so to ad the map onto your website and then add multiple markers to show different locations to all the different people that visit your website. So give that go and if you get stuck, don't forget to use a git hub or ask a question down below. 10. Recap&Conclusion - Thank you: Thank you all for watching this class. I hope you've learned a lot, and I hope you're able to use these tools to benefit your own website. So to conclude, today I've taught you how to integrate Google maps into your website by using HML CSS and JavaScript. I showed you how to show locations using markers, how to customize the maps, and how to use Google Geocoder to show customer locations on the map. So please give the class project to go and check out my other class in the channel where I showed you how to make a website from scratch, using CSS and HTML. And thank you for watching.