How to embed Google Maps in HTML?
Answer: Using an <iframe> Tag
A Google map can be added to any webpage using an HTML <iframe> tag. It can be used to add maps for any location, such as the location of your store, or of your college in your web portfolio.
In this tutorial, we will learn how to embed the Google maps on the webpage using HTML.
Embed Google map in HTML
To embed Google Maps in HTML, use <iframe> tag within the iframe tag, the src attribute is used to add the path of the map. Here is the list of steps to embed the google map on the webpage.
-
Go to the official website of Google Maps.
2. Now you can type the name of the desired location in the search box.
3.Select the location.
4.Click on the hamburger menu on the top of Google Maps.
5.You will get a dropdown menu with a list of options. Select share or embed maps.
6.A new page will open where you need to choose to embed maps options.
7. Copy the HTML code and paste it into your code.
This HTML code already contains <iframe> along with other attributes used in maps. You can change the value of attributes accordingly.
Example: Embed Google Maps in HTML
Here, we have embedded our location on the webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<h2>Embedding Google map on webpage</h2>
<p> Get our location on Google map </p>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3502.089070822426!2d77.37005092528857!3d28.62709245167472!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390ce592249a75dd%3A0x8531e194a870c5bc!2sStudyTonight!5e0!3m2!1sen!2sin!4v1625134056732!5m2!1sen!2sin" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</body>
</html>
Output:
Example: Add Google Map in HTML
You can select any location and add its HTML code to add maps on the webpage. But you cannot change the location of the map after embedding it. You need to change the HTML code for that. Here is yet another example of it.
Conclusion
So now, we can easily embed Google Maps on a webpage using HTML <iframe> tag. The commercial websites uses the location of their stores using maps, which can be helpful for the user to reach the stores by navigating the maps.
