Google Maps is one of the most useful tools for showing business locations on a website. It helps people find directions, explore nearby landmarks, and know exactly where your business is located. You’ve probably seen a Google Map on the contact page or the footer of many company websites.
For local businesses like restaurants, offices, or shops, a map helps customers reach the right place easily. Even online brands with a physical office can use Google Maps to prove authenticity and make their website look more professional.
In this post, we’ll show you how to add Google Maps to your WordPress website. I’ll discuss both manual and plugin-based methods. Keep reading this post to the end!
Why Add a Google Map to Your Website?
Adding a Google Map is not just about showing a location. It also improves trust, user experience, and even SEO. Let’s explore the key benefits below.
1. Help Visitors Find You Easily
A map lets users find your exact business location without confusion. They can view directions, check the distance, and even use GPS navigation to reach their office or store. It’s especially helpful for businesses with multiple branches in different areas.
2. Share Multiple Office Locations
If you run a business in several cities or countries, you can use a single map to highlight all your offices. This saves time for visitors and gives them a clear view of your company’s physical reach.
3. Improve Local SEO
Almost 97% of people search online to find local businesses. Having an embedded Google Map can boost your local SEO ranking. It signals to Google that your business is location-based and relevant for nearby searches.
Check the best WordPress SEO plugins.
4. Build Trust and Credibility
When visitors see a real map and verified location, they trust your business more. If your map is connected with your Google Business Profile, people can also read customer reviews and ratings, which adds credibility.
5. Enhance User Experience
A map makes your contact page more informative and interactive. Instead of just writing an address, a live map helps users visualize your location instantly. It makes your site look more complete and user-friendly.
Take a look at how I fixed thousands of fake 404 pages and SEO spam injections.
How to Add a Google Map Without a Plugin
You can add a Google Map manually by embedding a small piece of HTML code from Google Maps. Here’s how to do it step by step:
Step 01: Go to Google Maps
Visit the official Google Maps website.
Step 02: Find Your Location
Type your business address in the search bar. Once the map loads, click on the three-line ‘hamburger’ menu in the top-left corner.
Step 03: Select Share or Embed Map
A sidebar will open up on the left side of your screen. You’ll get numerous options on the sidebar. From them, click the option Share or embed map.
Step 04: Copy the Embed Code
A popup will open up. Go to the Embed a map option on the popup.
Your desired location will be shown in an HTML code. By clicking the COPY LINK button, copy the HTML code.
Step 05: Paste the Code in WordPress
Go to your WordPress dashboard. Find and add the Custom HTML block to the WordPress editor.
Now, it’s time to paste the HTML code into the block. When done, click the Publish button in the top-right corner.
Step 06: Preview the Page to See the Map
Now, go to the preview section of the page. You’ll see the map appear on the page.
How to Add a Google Map in WordPress Using a Plugin
If you want an easier way to embed maps without copying code, you can use a plugin. One of the best free options is the Spectra plugin. It’s a powerful block plugin that includes a ready-made Google Maps block. Check how to use it:
Step 01: Install and Activate Spectra
Go to your WordPress dashboard. Navigate to Plugins > Add Plugin. Type Spectra in the search box on the top-right corner.
Once the plugin appears below, install and activate it.
Step 02: Add the Google Maps Block to the Editor
Open the page where you want to add your map. Click the plus (+) icon to add a new block. Search for the Google Maps block and insert it into the page.
You’ll instantly see a default map. By default, it displays the official location of Brainstorm Force, as they have developed the plugin.
Here’s a detailed discussion regarding the pros and cons of the Spectra plugin.
Step 03: Set Your Desired Location on the Map
Once you are using the Spectra block, you don’t have to go to the Google Map and copy the HTML code for the location.
Instead, place your cursor on the Address box on the right sidebar under the General tab.
Just type the address of your desired location. You’ll see that the map instantly updates its location.
Thus, you can easily set and display your desired location on the Gutenberg block editor using the Spectra block.
Step 04: Configure Google Map Settings
Now, from the General tab, you can enable Satellite View, Zoom, Height, and Language.
You can see in the image below that I have already made some changes to these settings, which have been reflected on my map.
Note: The best part of Spectra is that it uses its own API key to display maps. That means you don’t need to create or pay for your own key, saving both time and cost.
Step 05: Configure Advanced Settings for the Google Map
Now, come to the Advanced tab. You’ll get various options there. Take a look at those options and what you can do with them.
- Animations – Add a subtle visual effect that will be displayed when the block is loaded. You can add animations like fade, slide, zoom, flip, zoom in, and zoom out.
- Display Conditions – Control the visibility of the Google Map block, allowing it to be shown or hidden based on specific conditions like user state or browser.
- Responsive Conditions – Hide or show the Google Map block based on the user’s device (desktop, tablet, or mobile) to optimize the design for different screen sizes.
- Z-Index – Specify the stacking order of the Google Map block in relation to other elements on the page, useful for creating overlays or layered effects.
- Advanced – By expanding this option, you can add HTML anchor and CSS class(es).
Wrapping Up
Hope you enjoyed this tutorial. By following this guide, you can display your physical business location on your website and improve user experience. However, there are some things you must keep in mind to get the best results.
Always keep your map address updated. Add markers for multiple branches if you have more than one. Combine your map with your Google Business Profile to show ratings and reviews.
Finally, use responsive settings so the map looks perfect on mobile devices.
