Google Maps to Your Website

How to Add Google Maps to Your Website

by

Adding a map to your website is a great way to help visitors find your location. Luckily, Google Maps makes this easy and free — even if you’re just getting started in web development.

In this tutorial, you’ll learn how to embed Google Maps into your website using a simple copy-paste method — no API key or coding experience required!

👁️ Preview

🧱 Step 1: Go to Google Maps and Search Your Location

  1. Visit https://maps.google.com
  2. In the search bar, type the address or place you want to show
  3. Once the location is visible, click the Share button (icon with an arrow)
  4. Click the Embed a map tab
  5. Copy the <iframe> code that Google provides

It looks like this:

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

🧩 Step 2: Paste the Code into Your Website

You can now paste the code wherever you want the map to appear:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Business Location</title>
</head>
<body>

  <h2>Find Us Here</h2>

  <div class="map-container">
    <!-- Paste your iframe here -->
    <iframe 
      src="https://www.google.com/maps/embed?pb=!1m18!1m12..."
      width="100%" 
      height="400" 
      style="border:0;" 
      allowfullscreen="" 
      loading="lazy" 
      referrerpolicy="no-referrer-when-downgrade">
    </iframe>
  </div>

</body>
</html>

🎨 Step 3: Optional CSS to Style the Map

You can wrap the iframe in a container to control its appearance:

.map-container {
  max-width: 800px;
  margin: 2rem auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

This gives the map a modern, rounded and centered layout on the page.

✅ Final Result

You now have a Google Map embedded on your site using:

  • Only HTML and optional CSS
  • No JavaScript or API key
  • A simple iframe that works on all modern browsers

🧠 Bonus Tips

  • Want more control? Use the Google Maps API (for developers)
  • You can embed directions, Street View, or custom pins
  • Always make sure the iframe is responsive on mobile

Leave a Comment