How to Add Google Map in WordPress with Kadence Block

Adding a Google Map to your WordPress website is a great way to share your location with your audience, enhance the user experience, and make your contact page more functional.

Whether you’re running a business, blog, or portfolio website, embedding a Google Map provides easy-to-access information about your location.

In this tutorial, I’ll guide you step-by-step on how to integrate Google Map into your WordPress website using the Kadence Blocks plugin.

For additional help, watch the embedded video below.

Why Should You Add Google Map to Your Website?

Including a Google Map in your WordPress site offers numerous benefits:

• Enhanced User Experience: Visitors can quickly find your location without leaving your site.
• Better Contact Page: Makes your contact page more professional and informative.
• Builds Trust: A map adds credibility, showing users where your business or service operates.

Let’s dive into the step-by-step instructions.

Step-by-Step Guide to Adding Google Map in WordPress

Step 1: Install the Kadence Blocks Plugin

To add Google Map functionality, you need the Kadence Blocks plugin. This plugin extends the WordPress Gutenberg editor with additional blocks, including a customizable Google Map block.

• Navigate to your WordPress dashboard.
• Go to Plugins > Add New.
• Search for Kadence Blocks in the search bar.
• Click Install Now and then Activate the plugin.

Once activated, you’re ready to add the Google Map block to your content.

Step 2: Choose Where to Add the Google Map

Decide where you want the Google Map to appear.

Common locations include:

• Contact Page: To show your business location.
• Blog Post: When discussing specific destinations or locations.

For this tutorial, we’ll add a Google Map to a blog post.

• Go to your All Posts section in the WordPress dashboard.
• Select the post you want to edit or create a new post.

Step 3: Add the Google Map Block

• In the WordPress editor, click the + icon to add a new block.
• Search for Google Map and select the block provided by Kadence Blocks.
• The default Google Map will appear in the editor.

Step 4: Customize the Google Map Settings

Kadence Blocks provides several options to customize the Google Map. Here’s how you can make it your own:

1. Add a Location:

• Use the search bar within the Google Map block to find your desired location.
• For example, type “New York” and select it from the suggestions.

2. Adjust Zoom Levels:

• Use the Zoom setting to control how close or far the map appears.
  • Lower zoom values (e.g., 5): Show a broader area.
  • Higher zoom values (e.g., 20): Focus on a specific location.

3. Change Map Type:

• Choose between Road Map or Satellite View for different visual styles.

4. Apply Map Filters:

• Add filters like Grayscale, Invert, or other effects to match your website’s design.
• If no filter is needed, leave the setting as None for a clean look.

“Customizing the map ensures it aligns perfectly with your website’s theme and functionality.”

Step 5: Style the Google Map

The Kadence Blocks plugin allows you to adjust the size and layout of the map for better integration into your content.

• Height and Width: Change the dimensions to fit your page layout.
• Padding and Margins: Adjust spacing around the map for a polished appearance.

For example, set the width to 600px and the height to 400px for a balanced look.

Step 6: Advanced Customizations

If you’re comfortable with coding, Kadence Blocks provides an Advanced settings tab:

• Add Custom CSS Classes to further style the map.
• Modify paddings, margins, or other properties for precise adjustments.

Step 7: Preview and Publish

• Preview the post or page to ensure the Google Map appears as expected.
• Once satisfied, click Publish to make it live.

Your website now has a fully functional Google Map embedded!

Frequently Asked Questions

Conclusion

Adding a Google Map to your WordPress website is a straightforward way to improve user experience and provide valuable location information. With the Kadence Blocks plugin, you can effortlessly integrate and customize a Google Map to fit your site’s needs.

For a visual walkthrough, watch the video embedded above.

If you need assistance with WordPress customization or blog post formatting, feel free to contact us for expert help. Don’t forget to subscribe to our YouTube channel for more tutorials and tips.

Make your website more user-friendly today with an embedded Google Map!