More web surfers than ever use online maps to locate people, places, and events. Most internet users are now familiar with both static and interactive online map formats. This guide looks at three of the best ways on how to add and customise Google maps in WordPress.
Benefits of Interactive Website Maps
There are plenty of reasons to add maps to WordPress blogs and websites. They can brighten up an otherwise dull-looking page for one. Location maps also emit trust signals to visitors in a similar way to profile photos on About Us pages.
Here are 8 excellent reasons to add Google Maps to your WordPress website.
- Google maps is now a globally familiar interface that’s simple to use
- Responsive (mobile-friendly) format
- Helps visitors locate whatever or whoever it is they’re looking for
- Easy to navigate, fast to load
- Improve Contact Us pages and business reputations
- Interactive maps enhance the site visitor experience
- Users can save, share, or download directions and routes
- Analytics; links directly to the site owner’s Google account
How to Attach Google Maps in WordPress
This guide looks at the following 3 ways to link Google maps in WordPress.
- Use a free Google Maps WP plugin
- Use the Google maps widget
- Manually, using HTML embed code
Method #1 – Google maps plugin
Plugins are popular because they make life simple for WordPress site owners. The one we’re going to use here is WP Google Maps. It lets you create custom maps and generate shortcodes. This dedicated plugin gives you control over where you place your maps.
Read How to Install New Plugins in WordPress before you continue if you’re new to plugins.
Log in to your WP Dashboard as Administrator.
Install then Activate the WP Google Maps plugin.
IMPORTANT NOTICE
Google web maps now need an API key to work. The notification on the settings screen has links to instructions on how to get this. You can still follow the map installation instructions without an API key as an exercise. However, you won’t be able to see the results until you add your API key.
Once activated, the plugin takes you to its Welcome notes. You might want to read this screen before continuing. If not, you can always review it later.
Click the Skip intro and create a map button.
Creating a simple map is self-explanatory. From the ‘Create Your Map’ screen, give it a name, select the dimensions, alignment, zoom level, and type of map.
Copy the shortcode to your clipboard after you’ve saved the settings.
Go to Posts => All Posts or Add New if you haven’t created a file yet.
To open an existing post, click its Edit link.
Click the place in content editor window where you want to display the map, then …
- Click the Add Block symbol (+)
- Select Shortcode from the blocks popup
The shortcode [/] box now comes into view.
Paste the shortcode copied previously using the keyboard shortcut CTRL + V. Alternatively, right-click and select Paste from the popup menu.
Click Save Draft or Update to save the changes to your post or page.
Click the Preview link to view your new map in the WP post or page.
IF YOU SEE A MAPS API ERROR, IT’S BECAUSE YOU HAVEN’T ENTERED A MAPS API KEY YET.
Â
How to enter your maps API key
Follow the ‘Get a Google Maps API Key‘ link.
Go to Maps => Settings from the side menu.
Paste your Maps API Key into the box provided and click Save.
General map settings
You can also change the map defaults from the Maps Settings screen (see next image). This is useful if you don’t want to keep tweaking individual maps.
Scroll down to the 6 WP Map Settings tabs and make any changes as necessary.
Click the Save Settings button when you’re done.
Edit individual map settings
You can access and edit your saved Google maps at any time.
Go to Maps => Maps from the Dashboard side menu.
Click the Edit link under the map’s Action column for the one you want to edit.
Now you can review and select individual map settings as required.
There are 7 map settings tabs to explore. The options you set depend on what you need.
Click the Save Map button once you’ve made changes to your map.
Method #2 – Google maps widget
GOOGLE MAPS WIDGET NEEDS AN API KEY TO WORK. CREATE YOUR API HERE TO CONTINUE.
The second method adds Google maps to widget-friendly sidebars. It displays a neat map thumbnail with a larger one presented in a lightbox. This method uses a free plugin called Maps Widget for Google Maps, by WebFactory Ltd.
Read How to Install New Plugins in WordPress before you continue if you’re new to plugins.
Log in to your WP Dashboard as Administrator.
Install then Activate the Maps Widget for Google Maps plugin.
The plugin adds new links to the Dashboard side menu.
Go to Settings => Maps Widget for Google Maps.
Paste your Maps API Key in the box provided then click Save Settings.
Now go to Appearance => Widgets.
You can drag-and-drop the widget into any of your widget-friendly areas. An even easier way is to prepare it from the Available Widgets section.
- Click the Down Arrow to display the dropdown options
- Next, choose where you want to place the Google map from the dropdown
- Click the Add Widgets button to save the changes
Map widget custom options
The saved widget moves over to the preselected widget area and auto-opens the custom map options. You have lots of choices here so that the map displays how you want it to. You can always customise it later if you’re keen to get your first map on display. However, there are two fields that you must fill in to continue.
#1 Add a meaningful title for your map in the Title Box.
#2 Add the custom address for your map in the address field
Click the Save button and preview the live site.
If you get the following error, your Google Maps API key is missing or incorrect.
Method #3 – Manually Embed
The third method uses the HTML embed feature to add Google maps to your WP posts and pages. This approach lets you add the code anywhere on your site.
Go to Google Maps.
- Type the address or search for the location you want a map for
- Click the Share icon in the left-side panel
- Click the Embed a map tab from the Share popup box
- Click the COPY HTML link
Now go to Posts => All Posts or Add New if you haven’t created a file yet.
To open an existing post, click its Edit link.
Follow the “WP Google Maps’ plugin procedure above to add the code to your edit screen.
View the changes in site preview when you’re done.
Here’s how our sample looks on the live site.
Closing Comments
Adding Google Maps to WordPress blogs and websites is painless and practical. They add a level of trust for visitors who might want to buy what you’re selling. Online maps also help to make your pages more interactive and compelling. Google Maps are the most important as they can improve local SEO. That means you’re much more likely to show up in local searches with maps.
