How to embed a Google map in HTML? – iframe method

In this post, you will learn to embed a Google map in HTML. You can embed a Google map in HTML either by using the API key or by using iframe-based HTML code. Here, in this post, I will tell you the steps to use iframe-based HTML code to add a google map to an HTML webpage.

Steps to insert a Google map in HTML webpage –

  1. You first need to open Google Maps. And then search for the location that you want to show on your webpage.

2. After you have searched the location, click on the “share” button.

3. When you click on the share button, a small window opens. You will find the “embed a map” option there, click on that.

4. Now, you will see an HTML code. That’s the code you copy and paste into your HTML file. Just click on “copy HTML” and paste the code into your HTML file.

Before copying the code, you can also select the size of the map by clicking on the dropdown menu.

Now, let’s see an HTML example.

embedded_google_map.html

<!DOCTYPE html>
<html>
    <head>
        <title>Embedded Google map example</title>
        <style>
            body{
                background-color: aliceblue;
            }
            div{
                text-align: center;
                margin-top: 5%;
            }
        </style>
    </head>
    <body>
        <div>
            <h1>EMBEDDED GOOGLE MAP EXAMPLE</h1>
            <iframe 
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2886.060590310234!2d-79.39696578453993!3d43.6677096791208!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882b34baf3dae513%3A0xc98434e11ec5f592!2sRoyal%20Ontario%20Museum!5e0!3m2!1sen!2sin!4v1658713695859!5m2!1sen!2sin"
            width="600" 
            height="450" 
            style="border:0;" 
            allowfullscreen="" 
            loading="lazy" 
            referrerpolicy="no-referrer-when-downgrade">
        </iframe>
        </div>
    </body>
</html>

Output:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: