HtmlHow-ToBeginner · 3 min read

How to Embed Google Map in HTML Easily

To embed a Google Map in HTML, use the <iframe> tag with the Google Maps URL as the src attribute. You can get this URL by clicking the Share button on Google Maps and selecting 'Embed a map'.

📐

Syntax

The basic syntax to embed a Google Map uses the <iframe> tag. The src attribute holds the Google Maps embed URL. You can set width and height to control the map size. The style attribute can remove borders. Use allowfullscreen to enable full screen mode.

html

<iframe src="https://www.google.com/maps/embed?pb=YOUR_MAP_EMBED_CODE" width="600" height="450" style="border:0;" allowfullscreen loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

💻

Example

This example shows how to embed a Google Map centered on New York City. It uses an iframe with width 600px and height 450px, no border, and lazy loading for better performance.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Embed Google Map Example</title>
</head>
<body>
  <h1>My Location Map</h1>
  <iframe
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d24156.123456789!2d-74.006015!3d40.712728!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a316f1f1f1f%3A0x123456789abcdef!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sin!4v1610000000000"
    width="600"
    height="450"
    style="border:0;"
    allowfullscreen
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade">
  </iframe>
</body>
</html>

Output

A webpage with a heading 'My Location Map' and an embedded interactive Google Map showing New York City.

⚠️

Common Pitfalls

Not using the correct embed URL from Google Maps can cause the map not to display.
Forgetting to set width and height can make the map invisible or very small.
Using HTTP instead of HTTPS in the src URL may cause mixed content errors on secure sites.
Not including loading="lazy" can slow page load times.

html

<!-- Wrong: Missing width and height -->
<iframe src="https://www.google.com/maps/embed?pb=YOUR_MAP_EMBED_CODE"></iframe>

<!-- Right: Include width and height -->
<iframe src="https://www.google.com/maps/embed?pb=YOUR_MAP_EMBED_CODE" width="600" height="450" style="border:0;" allowfullscreen loading="lazy"></iframe>

📊

Quick Reference

Remember these tips when embedding Google Maps:

Get the embed code from Google Maps Share > Embed a map.
Always set width and height on the iframe.
Use loading="lazy" for better performance.
Use HTTPS URLs to avoid security warnings.
Set style="border:0;" to remove iframe borders.

✅

Key Takeaways

Use the iframe tag with the Google Maps embed URL in the src attribute to embed a map.

Always specify width and height to ensure the map displays correctly.

Get the embed URL directly from Google Maps Share > Embed a map for accuracy.

Use HTTPS URLs and loading="lazy" for security and performance.

Remove iframe borders with style="border:0;" for a cleaner look.