How to embed a Google Map into HTML
Google Maps is becoming a necessary resource for showing geographic information and guiding users around. In order to improve user experience and provide visual context for a specific region on your website or online application, consider incorporating a Google Map into your HTML. In this answer, we’ll learn how to insert a Google Map into your HTML code.
Steps to add Google Map
Step 1: Write basic HTML code
We will first write basic HTML code with no Google map embedded. The code is fairly easy to understand.
The below code is an incomplete HTML document that sets up the basic structure for embedding a Google Map. It includes a heading level 1 (<h1>) element with the text Embedding Google Map for the main heading. The <style> section defines CSS rules to set the height of an element with the id map to 400 pixels and its width to 100% of the parent container. The <body> section is empty, indicating that no content is currently present within it.
Step 2: Embedding Google Map in the code
To embed the Google map, first open Google Maps on the webpage and search for the location you want to embed. Once you have entered your desired place, you will see a “Share” icon. Click the icon and then click the “Embed a map” option. There you will see the code that needs to be added to the HTML file.
In this example, we want to embed Educative’s Lahore office map to the HTML. The obtained code from Google Maps is:
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13605.022603066973!2d74.3518831!3d31.5171377!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39190566eb1a38bf%3A0xa8c7f816987e4d02!2sEducative!5e0!3m2!1sen!2s!4v1685301699963!5m2!1sen!2s" width="600" height="450" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
The above code snippet is an <iframe> element in HTML used to embed a Google Map on a webpage.
Let’s break down its attributes and their purposes:
-
src: The source attribute specifies the URL of the embedded content, which in this case is a Google Maps embed. The URL contains various parameters that define the specific map location and its settings. -
width and height: These attributes define the dimensions of the embedded map. The map will be displayed with a width of600pixels and a height of450pixels. -
style: This allows us to specify inline CSS rules for the element. -
allowfullscreen: This attribute enables the map to be viewed in fullscreen mode when the user clicks on the fullscreen button in the map controls. -
loading: The loading attribute specifies how the browser should handle loading the embedded content. In this case, it is set to"lazy". This means the browser will defer loading the content until it is visible on the screen. -
referrerpolicy: This attribute specifies the policy for sending the HTTP referrer header. In this case, it is set to"no-referrer-when-downgrade". This means that the referrer will not be sent if the destination URL is a downgrade (HTTP to HTTPS).
Overall, this <iframe> element is used to embed a specific Google Map on the webpage, allowing users to view and interact with the map directly on the page.
Now, we will add the obtained code in our HTML code and get the desired result:
Conclusion
In conclusion, incorporating a Google Map into your HTML webpage offers a dynamic way to enhance user experience. By following the provided steps, you can seamlessly embed an interactive map for location-based information and navigation.
