How to Add Google Maps in WordPress?

How to Add Google Maps in WordPress (Step-by-Step Guide)

Adding a Google Map to your WordPress website is a great way to help your visitors find your business, office, or any location easily. Whether you run a local shop, blog, or service website, embedding a map improves user experience and makes your site more interactive. WordPress offers multiple ways to add Google Maps — from simple manual embeds to advanced plugins and page builders — so you can choose the method that best fits your needs.

Here’s a complete step-by-step guide for all methods:

Method 1: Using Google Maps Embed Code (Manual Method)

1. Go to Google Maps

   • Open Google Maps in your browser.

   • Search for the location you want to display.

2. Get the Embed Code

   • Click the Share button → select Embed a map tab.

   • Choose the map size (Small, Medium, Large, or Custom).

   • Click Copy HTML to copy the iframe code.

3. Add to WordPress

   • Go to Dashboard → Pages/Posts → Edit.

   • Switch to HTML / Code Editor or use a Custom HTML block in Gutenberg.

   • Paste the iframe code → Publish/Update.

Pros: Simple, no plugin needed
Cons: Limited customization

Method 2: Using Gutenberg Google Maps Block

1. Open Page/Post Editor

   • Go to the page or post where you want the map.

2. Add Google Maps Block

   • Click + → search for Map or Google Maps block.

   • Paste the Google Maps URL (from Google Maps → Share → Copy Link).

3. Adjust Map

   • Set height, width, and zoom (if block allows).

4. Publish the Page

   • Click Publish/Update.

Pros: Easy, Gutenberg native
Cons: Limited features

Method 3: Using a WordPress Plugin (Advanced Features)

Recommended Plugins:

• WP Google Maps

• MapPress Maps for WordPress

• Google Maps Widget

Steps (WP Google Maps example):

1. Install Plugin → Dashboard → Plugins → Add New → Search → Install → Activate.

2. Create a Map → Maps → Add New Map → Enter location and markers.

3. Adjust Settings → Width, height, zoom level, map type.

4. Get Shortcode → Copy the generated shortcode.

5. Add to Page/Post → Paste shortcode → Publish/Update.

Pros: Fully customizable, multiple markers
Cons: Adds extra plugin load

Method 4: Using Elementor Page Builder

1. Open Elementor Editor → Edit page with Elementor.

2. Add Google Maps Widget → Drag & drop it into section.

3. Configure Map → Enter location, zoom, height, width.

4. Publish → Save and preview.

Pros: Drag-and-drop, easy design
Cons: Only works with Elementor

Method 5: Using Google Maps API (Advanced Customization)

1. Get API Key → Google Cloud Platform → Create project → Enable Maps JavaScript API → Create API Key.

2. Add API Key in WordPress → Some plugins require API key for advanced features.

3. Create Custom Map → Use plugin or JavaScript for multiple markers, info windows, or custom styles.

Pros: Fully customizable, professional
Cons: Requires technical setup