Vote for me in the Maps Challenge!

Recently, I have created a website that utilizes Google Maps. Embedding Google Maps onto my website was fairly easy and not that hard to do. In this Instructables, I will be showing you how easy it is to embed Google Maps onto your website.

To be honest with you, I just embedded Google Maps onto my website just for fun. There's not that much stuff to do while in quarantine, so why not make a website that utilizes Google Maps then show people the steps that I've took while creating this website.

Now I must say, you must know a thing or two about HTML and CSS in order to embed Google Maps onto your website. If you don't know anything about HTML or CSS, try going to https://www.w3schools.com/

Note: I am not affiliated with W3Schools in any shape or form. It's just a website that I've found to be helpful when learning HTML and CSS.

Supplies

Text Editor (will be used to customize your website and provide the content on your website).
Google Maps (what would be embedded onto your website).
Basic Understanding of HTML and CSS (these are the following programming languages that would be used when customizing your website and providing content on your website) .

Step 1: Provide Content on Your Website

Go to your text editor software on your computer. For instance, since I have a Windows, I should go to Notepad. After you go to Notepad type in the following:

<!DOCTYPE html>
<html>
<head>
<title>Google Maps</title>
</head>
<body>
<center><h3>Google Maps</h3></center>
</body>
</html>

After you're done typing in the following in Notepad, go to Google Maps where you would later on get the code for you to use to embed Google Maps onto your website.

Here's the link for you to go to Google Maps: https://www.google.com/maps

Step 2: Embed Google Maps Onto Your Website

Once you're on Google Maps, click on the "Menu" button and then look for "Share or embed map". Once you see "Share or embed map", click on it. Once you have clicked on that, you should see "Send a link" and "Embed a map". Now click on "Embed a map", once you have clicked on "Embed a map" you should now see a down arrow to the left of a text box which would be utilized to pick how big or small you want the map to be. Copy the text in the box. And paste the text into the HTML of your website.

Step 3: Customize Your Website

Go back to your text editor software on your computer and type in the following:

<!DOCTYPE html>
<html>
<head>
<title>Google Maps</title>
</head>
<style>
body{background-color:rgb(129, 207, 224, 1);}
</style>
<body>
<center><h2>Google Maps</h2></center>
<center><iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d13254.264540349537!2d-84.6792829!3d33.8492979!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1593816060723!5m2!1sen!2sus" width="800" height="600" frameborder="0"  allowfullscreen="" aria-hidden="false" tabindex="0"></iframe></center>
</body>
</html><br>

The style tag is used in order to customize your website. Now, I will advise you that this step utilizes CSS. You can type in the following so that yours look exactly like my website.

Once you're done, save your file as "Google Maps.html". Don't forget the html part because if you don't include this part, your can't make a website.

Step 4: Look at Your Final Product

Once you're done following all of the steps in this Instructables, take one good look at your final product. If you're happy with your final product, that's great. But, if you're not happy with your final product, go back into your Notepad and try to fix your final product so that next time when you take one good look at your final product, you will be happy with what you have created with your hands.

If you wish to view my source code, it can be found at the bottom of this Instructables. Thank you for viewing my Instructables and happy coding!

As a reminder, please vote for me in the Maps Challenge!