Add a Map to WordPress with WP Google Maps
There are 1000 reasons you might want to show a map on your WordPress site. Everything from a one-time event that happened at a cool place you want to show off to the (probably more common) case where you want to help your site visitors find the physical, real-world location of your business. For all the reasons and more, you’ll likely need to install a WordPress plugin. For this Quick Guide, we’ll show you how to add a map to your WordPress site using the WP Google Maps plugin. (We’ve recommended this plugin for quite some time. Here’s Fred’s pointer to it from 2015. 🙃)
How to Show a Map with WP Google Maps, Video-form
Steps to Show a Map Using the Google Maps Plugin for WordPress
- In the WordPress admin area, go to the “Plugins > Add New” screen. There do a search for the “WP Google Maps” plugin. “Install” and “Activate” that plugin. (That is, get its files, then turn it on.)
- Now you’ll have the “Gutenberg Block” that makes it possible to add a map to your WordPress post. To use it, you’ll want to click the “+” in the post or page you want to use, and then do a search (again) for “WP Google Maps” on the “block finding” popup. Once that’s selected, you’ll drop in the map bit.
- To configure the map, you’ll need to click in right-side-area of the Block editor. Under the “Block” settings, you’ll want to click the “Go to the Map Editor” button under the “Map Settings” section.
- Click to the Map Editor will give you a screen where you can build and edit your map. I did this very quickly in the video, but you might spend a while customizing points and location for the map. We’ll leave the details of that as an exercise for the reader (as many people will likely want different features). Be sure to save your map!
- After you’ve editing the map, make sure you Publish the post or page that you’ve added the Map to. Then when you go to look at it on the front of your WordPress site, you should see your map 🙂
A note about Google Maps and API Keys
In the video, and in the written tutorial above, I skipped getting the Google Maps API key that is required to get a Google Map working in your WordPress site. I’m not sure how easy it is, but if you’ve got the plugin I’m guessing that they have a guide to walk you through that process if you get stuck. I hope you’ll figure it out, if you have a strong preference for Google Maps over OpenLayers. I think OpenLayers is likely to be good enough for most people most of the time, but I also do prefer Google Maps.
Google requires these API keys for two basic reasons: to prevent abuse of their system, and to make money. Which are both reasonable, but the steps to get one were more complicated than we wanted to include in this Quick Guide. If you’re sure we should have included those steps too, let us know in the comments 🙂