Quick Calculators

How to Embed Google Maps in HTML Website | Step-by-Step Guide

How to Embed Google Maps in HTML Website: Free Tutorial | QuickCalculators
Updated for 2025

How to Embed Google Maps in HTML Website

Learning how to embed Google Maps in HTML website pages is one of the best ways to build trust with your visitors. Whether you run a local business or a portfolio site, this guide provides the fastest way to add a fully responsive location map in under 2 minutes.

Live Map Generator

Preview

Type a city or landmark above to see the embed update instantly.

Pro Tip: This generator uses a quick preview method. For your real website, use the official “Share” method below to ensure it works permanently.

1

Steps to Embed Google Maps in HTML Website

The most reliable method to embed Google Maps in HTML website pages is to get the code directly from Google. It requires no API key and is completely free for basic use.

  1. Go to Google Maps

    Visit maps.google.com and search for your business or location.

  2. Click the “Share” Button

    Look for the Share icon in the location details panel.

  3. Select “Embed a map”

    A popup will appear. Switch to the “Embed a map” tab. You can choose Small, Medium, Large, or Custom Size.

  4. Copy HTML

    Click “Copy HTML”. This is the iframe code you need.

2

Code to Embed Google Maps in HTML Website

Use the HTML structure below to make your map responsive (so it looks good on mobile phones). Simply paste the iframe code you copied from Google into the designated spot. This is the cleanest way to embed Google Maps in HTML website layouts.


<!-- Google Maps Container -->
<div class="map-responsive">
    
    <!-- PASTE YOUR COPIED GOOGLE MAPS IFRAME HERE -->
    <iframe 
        src="https://www.google.com/maps/embed?pb=!1m18..." 
        width="600" 
        height="450" 
        style="border:0;" 
        allowfullscreen="" 
        loading="lazy" 
        referrerpolicy="no-referrer-when-downgrade">
    </iframe>

</div>

<!-- Add this CSS to your stylesheet (style.css) -->
<style>
    .map-responsive {
        overflow: hidden;
        padding-bottom: 56.25%; /* Keeps it 16:9 ratio */
        position: relative;
        height: 0;
    }
    .map-responsive iframe {
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        position: absolute;
    }
</style>

Common Questions

Do I need a Google Maps API Key? â–¼
For the simple “Embed” method shown in Step 1, no, you do not need an API key or billing account. However, if you want advanced features like custom markers, styling, or automatic user location detection, you will need the Google Maps JavaScript API, which does require a key.
Why is my map not responsive on mobile? â–¼
The default code from Google has a fixed width (e.g., `width=”600″`). To fix this, use the CSS provided in Step 2 above. It sets the width to `100%` and uses a padding-bottom hack to maintain a perfect aspect ratio on all screen sizes.
Can I remove the “View larger map” link? â–¼
No, Google’s Terms of Service require the branding and links to remain visible on the free embed. Hiding them via CSS is against their policy and may cause your map to stop working.

https://quickcalculators.in/how-to-add-a-weather-widget-to-your-website/