+254725682556 +254725052660 info@ziprof.co.ke
Client Area

Website & Web Design

How to Add a Google Maps Location to Your Website

If customers need directions to your shop, office, or premises, embedding a Google Maps location on your website saves them a phone call and makes your business look more professional. Adding a map takes a few minutes and doesn't require any coding experience.

What You'll Need

  • A Google account (the same one you might use for Gmail or Google Business Profile)
  • Your business's exact address, or a pinned location on Google Maps
  • Access to edit your website's pages, either through your website builder, WordPress dashboard, or your hosting File Manager
If you haven't already set up a Google Business Profile for your business, do that first. It makes your business easier to find on Google Maps and Search, and it's free.

Step 1: Get Your Map's Embed Code

  1. Go to Google Maps and search for your business or address.
  2. Once the correct location is showing, click the Share button.
  3. Select the Embed a map tab.
  4. Choose a map size (Small, Medium, Large, or Custom Size).
  5. Click Copy HTML. This copies an iframe code snippet to your clipboard.

Step 2: Add the Map to Your Website

If You Use WordPress

  1. Log in to your WordPress dashboard and open the page you want the map on (for example, your Contact page).
  2. Add a Custom HTML block, or in the Classic Editor, switch to the Text tab.
  3. Paste the embed code you copied from Google Maps.
  4. Click Update or Publish to save the page.

If You Edit Your Website's HTML Directly

  1. Open your website's files using your hosting File Manager or an FTP client.
  2. Find the HTML file for the page you want to add the map to.
  3. Paste the embed code into the page at the spot where you want the map to appear.
  4. Save the file, and upload it back if you edited it on your own computer.

Step 3: Check the Map on Mobile

Load the page on your phone to make sure the map resizes properly and isn't cut off. If it looks too wide or too narrow, wrap the embed code in a container with a percentage-based width, or ask your web developer to make it responsive.

Avoid pasting a screenshot image of a map instead of the embed code. A static image can't be zoomed, panned, or tapped for directions, and it won't update if your location details on Google Maps change later.

Updating Your Map Later

If your business moves, or you want to adjust the exact pin location, repeat Step 1 with the new address and replace the old embed code with the new one. The map itself is hosted by Google, so you never need to change anything on your hosting account, only the embed code on your page.

Troubleshooting: Map Not Showing

  • Make sure you copied the full embed code, including the opening and closing iframe tags.
  • Some page builders strip out HTML for security reasons. Look for a dedicated "HTML," "Embed," or "Custom Code" block instead of a plain text field.
  • If your website uses a caching plugin, clear the cache after saving the page so you see the update.

If you'd also like to make it easier for visitors to reach you directly from their phone, see How to Add a WhatsApp Chat Button to Your Website.