How do I add or fix a map on my website?

How do I add a Google map to a page?

1. Find the place. On a computer, open Google Maps and search for your business or address.
2. Get the code. At the top left, open Menu and choose Share or embed map. Select Embed a map, then Copy HTML.
3. Open the page. In WordPress, go to Pages, hover over the page and select Edit.
4. Add a Custom HTML block. Select the + button and choose Custom HTML, or type /html and press Enter.
5. Paste the code. Select Edit HTML, paste, check the preview on the right, then select Update.
6. Save and check. Save the page, then open it on a computer and a phone.
   • Expected result: the map shows your pin and can be moved and zoomed.

For a directions map, select Directions in Google Maps, choose a route, then Share, Embed a map and Copy HTML. These steps follow Google’s share or embed a map guide and WordPress’s Custom HTML block guide.

On a standard WordPress site, only Administrators and Editors can save embed code like this; WordPress strips it for other roles, as its roles guide explains. If the map disappears when you save, your login doesn’t allow it.

The short version

• Copy the embed code from Google Maps (Share or embed map, then Embed a map) and paste it into a Custom HTML block.
• Wrong pin? Fix the place in Google Maps or your Google Business Profile, then copy new code.

How do I fix a map that shows the wrong place?

The embed copies whatever Google shows for that search. If the pin is wrong, the fix starts on Google’s side:

1. If it’s your own business, correct the address in your Google Business Profile. See update your Google listing.
2. Once Google shows the right spot, copy fresh embed code.
3. Replace the old code in the Custom HTML block and save.

Updating the address text on the page doesn’t move the map. See update your phone number, address or hours for every other place the address appears.

Why does the map show an error or a grey box?

A map built by a theme or plugin (not pasted from Google) uses the Google Maps Platform. Google says it needs an API key, and a standard key needs a Google Cloud project with billing turned on. A missing, expired or restricted key is the usual cause of an error box.

1. Find which plugin or theme setting draws the map.
2. Check its API key setting and whoever owns that Google Cloud account.
3. Or replace it with embed code copied from Google Maps, using the steps above.

Google’s API key guide recommends restricting each key to your own website, because the account owner pays for misuse of an open key.

What are the common mistakes?

• Pasting into a Paragraph block. The code shows as text. Use a Custom HTML block.
• A map with no address beside it. Keep the address as plain text too, for people and for search engines.
• Too many maps. Each one adds weight to the page. One on the contact page is usually enough.

How does E-3 handle this?

Tell us which page the map belongs on and the exact address through Request a change. A person at E-3 adds or fixes it. Call 814-399-4655 or email support@e3help.me.

Related questions

• How do I update my phone number, address or hours?
• How do I update my Google listing or get reviews?
• Can I embed a widget or code from another service on my website?