If you have a physical location, your website needs a map.

It builds trust with local customers and stops them from leaving your site to open a separate map application.

The process of adding a map is often more simple than business owners expect. You generally do not need a developer or a paid account for a basic map. However, if you want to show multiple locations or custom branding, the process changes.

This guide explains how to embed a Google Map in HTML, covering both the free method and the advanced options.

How to Embed Google Map in HTML Using iFrame (No API Key)

The easiest way to put a map on your site is using an “iFrame.” This is a window that shows the map directly from Google.

You do not need to sign up for Google Cloud or enter credit card details for this method. It is completely free and works for any single location.

Here is the step-by-step process:

  1. Go to Google Maps in your browser.
  2. Search for your business name or address.
  3. Click the Share button (usually an icon with an arrow).
  4. Click the tab labelled Embed a map.
  5. Choose your size (Small, Medium, Large, or Custom Size).
  6. Click Copy HTML.

This gives you a line of code that starts with <iframe src=…. This is your Google map embed code. You now have everything you need to display the map on your site without an API key.

Where to Paste the Google Map Embed Code

Copying the code is the easy part. Knowing where to place it causes the most confusion.

If you paste the code into the wrong place, it will just show up as text on your screen rather than a map.

For HTML Websites

If you are coding a site from scratch, you paste the Google map embed code directly into your HTML file. It should sit inside the <body> tags, usually within a <div> container to keep it organized.

HTML Code Example

<div class=”map-container”>

    <iframe src=”https://www.google.com/maps/embed?…” width=”600″ height=”450″ style=”border:0;” allowfullscreen=”” loading=”lazy”></iframe>

</div>

For WordPress Websites

Most business owners use a CMS like WordPress. A common mistake is pasting the iframe code directly into the standard visual text editor.

To embed the map correctly:

WordPress Custom HTML block containing the pasted Google Maps iframe embed code.
  1. Open the page where you want the map (usually the Contact page).
  2. Add a new block.
  3. Search for Custom HTML.
  4. Paste your iframe code into this block.
  5. Click Preview to confirm it loads.

If you are using a page builder like Elementor or Divi, look for a specific “Google Maps” widget. However, the Custom HTML widget is often more reliable as it gives you total control over the code.

How to Embed Google Map With Multiple Locations

This is one of the most common problems our clients face. The standard “Share” method described above has a major limitation: it can only display one pin at a time.

If your business has two offices or a chain of stores, you cannot use the standard iframe code. You have two options to solve this.

Option A: The “Google My Maps” Workaround (Free)

Google has a separate tool called Google My Maps that allows you to build custom maps.

  1. Go to Google My Maps and create a new map.
  2. Search and add markers for all your different locations.
  3. Click Share and change permissions to “Public.”
  4. Click the three dots next to the map title and select Embed on my site.
  5. Copy the code.

This method is free, but the design often looks cluttered and includes a “created by” header that you cannot remove.

Option B: The Google Maps JavaScript API (Professional)

For a seamless look where you control the branding and pin style, you must use the Google Maps API.
This requires a developer to write JavaScript code. It allows you to:

  • Show distinct pins for multiple branches.
  • Cluster pins together if you have hundreds of locations.
  • Remove competitors’ pins from the map view.

This method requires a Google Cloud account and an API key.

Contact us for custom API development

Why You Should Avoid Google Maps Embed Generators

If you search for “how to embed a map,” you will see many third-party websites offering a Google Maps Embed generator.

These tools promise to create the HTML code for you instantly. While they might look convenient, we strongly advise against using them.

The Hidden Risk

These generators are rarely charitable tools. They often exist to inject spam into your website. When you copy the code from these sites, they frequently hide extra links inside the iframe.

You might see your map, but hidden in the code are back-links to unrelated spam sites (like gambling or essay writing services).

SEO Consequences

Google sees these hidden links on your website. This can hurt your SEO ranking because it looks like you are linking to low-quality spam.

The Solution

Always get your map code directly from the official Google Maps site as shown in first step. It is clean, secure, and guarantees that no unwanted ads or links are added to your business website.

Making Your Map Responsive and Mobile Friendly

When you copy the code from Google, it usually comes with a fixed size. You will see part of the code that looks like this: width=”600″.

This means the map will always be 600 pixels wide. This is fine for a desktop computer, but a standard mobile phone screen is much narrower.

If you leave the code as is, the map will stick out off the side of the mobile screen, or users will have to scroll sideways to see it. This is bad for User Experience and SEO.

The Quick Fix

You do not need to be a coder to fix this. You simply need to change one number in the embed code.

  1. Find the part of the code that says width=”600″.
  2. Delete “600”.
  3. Replace it with “100%”.

Your code should now look like this: width=”100%”.

By setting the width to a percentage, you are telling the map to fill 100% of the available space, whether that is a large desktop monitor or a small smartphone screen. The map will now resize itself automatically to fit the device.

Need More Than a Basic Map?

Adding a Google Map to your website improves local SEO and user trust instantly.

For most small businesses with a single location, the free method we listed above is the best solution. It is fast, costs nothing, and does not require technical maintenance.

However, if you need to display multiple locations, custom brand colours, or advanced filtering, the free method will not work. You will need a developer to configure the Google Maps API correctly to avoid billing errors and display issues.

At Adelaide Web Marketing, we handle these complex integrations for our clients. We ensure your map works perfectly on every device without slowing down your website.

Contact us for help with your website build