You Need a Map on Your Site, and Google Has the Answer
You’ve seen it on restaurant sites, local business pages, and event listings—a clean, interactive map that shows exactly where to go. It builds instant trust and makes your location impossible to miss. But when you look at the Google Maps website itself, it feels like a separate tool, not something you can just drop into your own web page.
The good news is, embedding a Google Map is one of the most straightforward technical tasks you can do for your site. You don’t need to be a professional developer. Whether you’re using a simple website builder like Wix or Squarespace, a content management system like WordPress, or coding a site from scratch with HTML, the process follows the same core principle.
This guide will walk you through the exact steps, from getting your free API key to placing the final code on your page. We’ll also cover how to customize the look, handle common errors, and explore simpler alternatives if you need a quick, no-code solution.
Understanding the Google Maps Platform
Before you copy any code, it’s helpful to know what you’re actually using. Google Maps is not just a free service you can take from google.com and put on your site. For websites and applications, it’s a product called the Google Maps Platform.
Think of it as a set of building blocks—APIs—that developers use. For simply showing a static or interactive map, you’ll use the Maps Embed API or the Maps JavaScript API. The Embed API is like getting a ready-made iframe from Google, perfect for simple needs. The JavaScript API gives you full control to create a custom, interactive map experience.
Both methods require you to have a Google Cloud project and an API key. This key is a unique password that tells Google who is using their service and allows them to track usage for billing. The core service has a very generous free monthly quota, which most small to medium websites will never exceed.
Prerequisites: What You Need to Get Started
You won’t need much, but having these items ready will make the process smooth.
A Google Account. This is the same account you use for Gmail or Drive.
A Google Cloud Project. Don’t let the term scare you. You’ll create this in a few clicks, and it’s simply a container for your map settings and billing.
A Billing Account. You must enable billing on your Google Cloud project. Again, you are very unlikely to be charged under the standard free tier, but Google requires a valid payment method on file. This allows them to charge you only if your website’s traffic explodes and you exceed the free quota.
Your Website’s Code Access. You need to be able to edit the HTML of the page where you want the map to appear. This might mean accessing the theme editor in WordPress, the code block in Webflow, or the raw HTML file on your server.
Method 1: The Simple Embed (Using an Iframe)
This is the fastest way. If you just need a basic, interactive map pinned to a single location, the embed method is perfect. It’s like sharing a Google Map link, but in a way that sticks directly on your page.
First, go to Google Maps in your web browser. Search for the exact address or location you want to display. Once the map is centered correctly, click on the “Share” button.
In the share menu, click on the “Embed a map” tab. You’ll see a preview of the map and a box containing HTML code that starts with `