In this article, I’ll show you how to add a responsive Google Maps map to a WordPress webpage (i.e. for a Contact page) without using a plugin. I’ll be using WordPress 6.0 for this tutorial, as well as the Twenty Twenty Two theme, which is the default theme for this version of WordPress.
The Google Maps feature allows you to display your business’s location on an interactive map, allowing site visitors to easily view where you’re located and interact with the map to see what else is around you, get directions, etc. It demonstrates to site visitors that you’re a local business and have a real, physical location. It is very common for businesses to have a map on their contact page.
There are tons of Google Maps plugins out there, but many of them are clunky and require either payment for the full plugin features or a Google Developer account with complicated steps that produce a less-than-desirable result.
All this being said, there is a really simple way to add Google Maps to your WordPress 6.0 pages without plugins and without a bunch of complicated steps. Let’s dive into it.
Step 1: Create an HTML Block
For starters, login to the admin area of your WordPress site and navigate to the “Pages” section (red arrow in the above image).
Click on the page you want to add your Google Maps feature to (you can click on the page name, in my case “Contact” – blue arrow in the above image – or simply click “Edit” under the page name).
If you’re using a block theme like Twenty Twenty Two, you will now be inside the Block Editor for your page. Scroll down to the location where you’d like to insert your map.
Next, click the “+” icon (the “Block Inserter” – red arrow in the image above) to insert a block.
Search for “Group” in the search field (outlined in green in the photo) and click to add the group block (red arrow). This will allow you to add some custom settings to the block element.
For example, click on the “Change Alignment” option (red arrow) and select “Full Width” (green arrow). This will make the width of the block that will contain our Google Maps interactive map full width.
Next, click the large “+” button inside the group (red arrow in the above photo). Search for “HTML” in the search bar (outlined in green) and click on the “Custom HTML” block (blue arrow).
You’ll see it now says “Write html…” (red arrow). This is where we’ll add our map.
Step 2: Generate Google Maps Embed HTML
We’ll now need to generate our map with Google Maps. To do this, open a new browser tab and navigate to Google.com if it is not your default search browser.
Next, type the address you want to display on your map. For this example, I’ll use the Empire State Building (red arrow). You can use your business’s exact address for this portion (i.e. street number, street, city, state, and zipcode – or whatever you type for international addresses if you’re not in the US).
Click on the map image that appears for your address in the Search Engine Results Page (red arrow in the image – this will either be in the middle of the page or off to the right, depending on whether you typed an address or the name of a place, like I did).
Your address will now appear as a marker on the full-screen map (red arrow in the above image). You’ll also see several icons underneath the address or title of the place you searched. These icons include “Directions,” “Save,” “Nearby,” “Send to Phone,” and “Share.” Click on the “Share” icon (blue arrow).
In the “Share” tab that appears, click on the “Embed a Map” tab (blue arrow in the above photo).
In this tab, you’ll see a preview of your embedded Google Maps widget. There’s a size dropdown on the left side of the code (green arrow) – you can select a premade size or choose “Custom” to set your own size. I’ll select the “Custom” option (red arrow).
Here, you’ll see the dimensions for my custom map. I’ll set the height, or the first dimension, to 1200 (red arrow). I’ll leave the width set to 600. You can click “Preview actual size” (green arrow) to show the map in a new pop-up window in full size (make sure you disable any pop-up blockers if you have them turned on to avoid blocking the window). Exit out of the preview window once you’re done.
Next, click the “Copy HTML” link (blue arrow). This is the code we’ll bring into our WordPress page.
Step 3: Paste HTML Code to WordPress Page
Navigate back to the browser tab that contains your WordPress website. Click on the empty HTML block where it says “Write HTML here…” and paste the code (red arrow) by hitting ctrl+v on your keyboard (cmd+v on a mac).
If you click the “Preview” option in the Block Toolbar (red arrow), you’ll now see your map displayed on your page (green arrow). Click back on the “HTML” option to return to the HTML code (blue arrow).
We have our map embedded on our page, but it’s not responsive – meaning if we view the map on a smaller screen, like a tablet or a phone, it won’t adjust it’s size to fit the screen. To fix this, we need to add some custom styling to the HTML code.
Step 4: Make Google Maps Responsive
I’ll be using code I got from this website to make the Google Maps embed responsive. Scroll down to the section labeled “How to Embed Google Maps Responsively” (red arrow). Then, scroll down to the second set of code (blue arrow).
Copy everything from “<style>” to “<div class=”google-maps”>” by highlighting the code with your mouse and hitting ctrl+c on your keyboard (cmd+c on a MAC – red arrow in the image above).
Navigate back over to WordPress. Click your mouse at the very front of the HTML code to insert this new code at the beginning (red arrow). Hit ctrl+v to paste your code.
Finally, click at the very end of the HTML code (red arrow) and type “</div>” to close everything off. Basically what you just did is wrapped your HTML code in custom styling. This styling tells the visitor’s browser to resize the map based on the size of the window they’re viewing it in.
Step 5: Adjust the Aspect Ratio of the Interactive Map
There’s one last thing we need to do – scroll back up to the top of the code till you see “padding-bottom: 75%;” (red arrow). This piece of code is determining the aspect ratio of the map.
Because I resized my map to 1200 x 600, it has a 2:1 aspect ratio. For this, I need to change the percentage to “50%” (red arrow).
If you’re not sure what percentage you should use for your map, simply take the aspect ratio (i.e. 16:9) and divide the second number by the first to get your percentage (9 divided by 16 is 56.25%).
Click “Update” to apply your changes (blue arrow in the above image), then click “View Page” in the bottom left corner to see the result.
You should now see your Google Maps widget displayed (red arrow in the above image).
You can test out the responsiveness by shrinking down the size of your browser, then scrolling back to the area of the webpage that has the map.
That’s it for this tutorial! If you liked it and want to learn how to make your own professional WordPress website from scratch, you can enroll in my WordPress 6.0 for Non-Coders course on Udemy, or check out my other tutorials!
