Maps provide an awesome visual interface that helps to communicate a whole lot of information. Adding business locations to websites via maps is an essential requirement to catch the attention of the readers. I have already covered in detail about adding Bing maps to WordPress. In this tutorial, I will explain in detail about two methods to add Google Maps to WordPress posts/pages with and without a plugin.
Method1: Manually add Google maps
Go to Google Maps and find the location we want to embed in our WordPress post or page
Now click the Share button on the left pane. A new popup window will appear as shown below. Now select the Embed a map option.
This is will display an iframe embed code as highlighted in the below image. Copy this code
Let us now go to our WordPress posts section and add a new post/page or edit an existing one to add this embed code.
The above post is from the Gutenberg block enabled WordPress editor. If Gutenberg blocks are not enabled then the screen would be as shown below.
Click the publish/update button to save the changes. Let us now go to our blog and view this post.
As we can see from the above image we have successfully embedded Google maps to our WordPress posts. This option of adding maps to WordPress posts/pages is suitable only if we are not frequently using the map feature in our blog.
Method2: Add Google maps via a plugin
All plugins that are used for displaying Google maps in our WordPress site requires a Google Maps API key. First, let us get this key before proceeding with plugin installation.
Go to Google Maps platform
Click the Get started to link to get begin the setup. Select the three checkboxes as shown in the below image and click the Continue button.
Now we have to sign in to our Google account to continue with the setup.
Next, we have to select a project to associate this API key that we are going to generate. Just give some meaningful name for the project and click Continue.
Now the next step is to set up a billing profile. As per the latest guideline from Google, we can only use Google Maps API key after setting up a billing profile. One important thing to note here is that Google is not going to charge us any fee immediately after we set up the billing profile. They will only verify our credit card by deducting an amount like $1 and will later refund it. Also once we exceed the free usage limit they will charge us only after our confirmation. This means that in no way Google is going to charge us for consuming their API keys without our authentication. Even if we exceed the free quota the only issue we are going to face is the unavailability of Google maps.
Now let us proceed with setting up our billing profile. Click Create Billing Account button and add our card information and address to complete the setup.
Once this process is complete we will see a screen as shown below. Now click the Next button to generate the API key for Google maps.
The key will be displayed in the window as shown in the above figure. Just copy this key to a notepad. We need this key for activating Google Maps in our plugin. Let us now go to our WordPress dashboard and install the Leaflet Maps Marker plugin. After installing and activating the plugin let us go to plugin settings.
Click on the Basemaps link and select the Default basemap for new markers/layers section. Here we have to set Google Maps as the default basemap option. Also, click the Save Changes button at the bottom
Now click on the Basemaps link and go to the Google Maps JavaScript API section. Here we have to paste the previously copied API key into the Google Maps API Key textbox. Also, make the status of the checkbox Google Maps Javascript API status as enabled by selecting the radio button.
After this click the Save Changes button at the bottom. Now we have to add the location that we have to embed via maps. These are known as markers in this plugin. Go to Add new marker section and provide a name for our marker. Search for the location we want to embed by typing in the location name. Just like Google maps, there will be suggestions and we can select our desired location.
Now click the Save Changes button at the bottom. This will display a shortcode that we can directly embed in our posts & pages.
The next step is to add the shortcode to either the new or existing post or page where we want to embed a map.
After this, publish or update the post/page by clicking the relevant button on the right pane. Now let us go to our blog and see the embedded map.
Thus using this plugin we can create shortcodes for different locations and add Google maps to our WordPress posts/pages easily.
Leave a Comment