How to add Google map to your website| Much Easier Than You Think
Many beginners who are just starting their Website Development career often find adding google map to their static website somehow awkward. You will need to get an API which they are new to or don’t have idea at all. Some after try many methods without desired output. The search ends here!
So in this article, I will show you the simplest way to add google map to your static website which carries the address in your contact us page or file. I will assume you have basic knowledge of HTML. And that you can display HTML code using your preferred IDE and web browser. I will be using Visual Studio Code and Google Chrome respectively.
First step is to copy the exact address you want to display its google map to search bar. In this case, we would be using: 329 Church St, Garland, TX 75042 found in a website. You can check it by clicking here: mssnoac. Note: The address may change later but it doesn’t matter to this tutorial.
Step 1: Search for 329 Church St, Garland, TX 75042 on google. Google will display the map. Click on the map. Then it will display the map result.
Step 2: click on direction
Step 3: The above result should show after clicking on direction. The next is to click on the menu bar at the top left corner. Once you click on it, scroll down to see option of share / embed. Click on it, then click on embed and copy the HTML link. The HTML link you copied should come with iframe tag, that is, <iframe>.
Step 4: Now go to your IDE and put the code you copied to the section you want to render / display the google map in the HTML document. If you will like to adjust the width and height, you can do so by altering the value of width and height that serve as attribute in the iframe tag.
Step 5: Refresh your page or push to the origin to see the changes.
Thank you for reading this. I hope it is useful and helpful. If you gain one or two things from here, kindly like, clap, drop comment and share to benefit others. Follow me on twitter here , linkedln here, and email: abideenmuhammed2018@gmail.com
