How to Embed a Map in Your WordPress Website
When running a WordPress blog, there are times when you need to embed a map on a page. Whether it’s the address of a business or tagging a specific location, nothing works better than a map, right?
Today, let’s look at how to neatly embed a map into your WordPress site.
Methods for Embedding a Map in WordPress
There are several ways to add a map to WordPress. If we summarize, the most commonly used map services can be narrowed down to the following three:
- Google Maps
- Naver Maps
- Kakao Maps
Each of these services provides a sharing function that allows you to display information about a specific location.
n this post, I’ll explain how to embed a map using Google Maps.
Recommended Way to Embed a Map
You can insert a map using the map block provided by each theme’s block editor, or you can embed it directly using the embed function.
Using a pre-designed map block allows you to display the map in a more visually appealing way.
However, using a map block can be surprisingly cumbersome, and sometimes due to version incompatibilities, the map may not display properly on the page — which ends up taking a lot of time.
The method I recommend is simply embedding the map using the embed function.
How to Embed a Map – Step-by-Step
Embedding a map consists of two main steps:
- Prepare a space on your website for the map
- Get the embedded map information
Let’s start by preparing a space to embed the map on your website.
Preparing a Space for the Map
Before inserting a map, you need to decide where it will go and create that space.
In my case, I’ll use a 2-column layout to demonstrate how to embed the map, as shown below.
Gwanghwamun is currently located at 12 Hyoja-ro, Jongno-gu, Seoul, South Korea.
On the right side, you can see the map information corresponding to Gwanghwamun.
Creating a Two-Column Layout
The first thing you need to set up is a Row Layout with two columns.
- Type a slash
/and search for Row Layout.
Change each of the two created columns into Paragraph blocks.
Then, place the cursor inside each paragraph — in the left section, type in your text, and in the right section, search for and insert a Custom HTML block.
Place your cursor in the right column, then type /html to search.
You will see Custom HTML appear, as shown in the image below.
Getting the Google Maps Embed Code
Search for Gwanghwamun on Google to bring up its Google Maps page.
Click the Share button located at the bottom right of the Gwanghwamun info card. This will bring up a screen where you can choose how to share the location. (Click the image below to enlarge it.)
elect the “Embed a map” tab. Then, choose the appropriate size by selecting “Small” on the left.
Click the “Copy HTML” button on the right to copy the iframe code, which looks like this:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3162.1163783927063!2d126.97423717507674!3d37.57587717203614!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca37454f683b1%3A0xfa19c5217c6a0bc0!2sGwanghwamun%20Gate!5e0!3m2!1sen!2sus!4v1714241263073!5m2!1sen!2sus" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>An iframe is an embedded code used to display the contents of another website within your own website. Simply paste the code above into the custom HTML space you created earlier — and you’re done!
Getting the Kakao Map Embed Code
Kakao Map also provides an embed code. When you search for Gwanghwamun, click the expand button (＋ icon) located above the location marker.
This will reveal a menu where you can copy the HTML tag.
Please follow the steps shown in the image below.
When embedding a map in WordPress, it’s recommended to choose the “general map” source, so users can use move and zoom functions.
Conclusion
In this post, we explained how to embed Google Maps and Kakao Maps.
I believe you can also easily embed Naver Maps by applying similar methods.
