Normally, when you want to add a map to show your location, for example, way to your company, there are 2 popular methods: embedding Google Maps code directly to your website or use a plugin as guided in this article. However, if you have a listing page site, the kind of page that listing all the restaurants in a city, and you need to display maps for individual restaurants, both methods above are impossible.

Thus, in this article, I will introduce another to help you add maps to individual posts or pages on your website in a simple way, which is the method with Meta Box plugin. You can download this free core plugin in WordPress.org. This plugin provides you a framework to create custom fields. If you're a coder, creating custom fields is not a challenge. Otherwise, you can buy  Meta Box Builder, a premium extension that lets you do it with intuitive UI, or you can use this free tool Online Generator.

Meta Box provides a Map field to display maps (Google Maps or Open Street Map). You just need to create an address field together with a Map field and display these 2 fields with Post, page or any of your post types. Then, each post will have these fields to let you fill in the address and display the corresponding for this post.

Here are the detailed steps:

Step 1: Get the Google Maps API Key

Following these Google’s instructions here to get API Key. After completing all those steps, you will have an API Key like in this image:

Get the Google Maps API Key

Just copy this API Key to use in the next steps.

Step 2: Create Custom Fields to Fill in Address

Come back to the admin dashboard on your website, go to Meta Box > Custom Fields > Add New.

In the Add New Field Group interface that you are staying in, in the Field tab, name your field group and respectively create two custom fields below.

Create Text Field with ‘Address’ Label to Add Address:

Click the Add Field button, search for and select the text field type. Then, edit the information for the field:

Create Text Field with ‘Address’ Label to Add Address

Create Google Maps Field to Display Map According To The Address In The ‘Address’ Field Above:

Because I use Google Maps API Key, I select Google Maps field type. However, Meta Box also supports Open Street Map so you can choose your own from these maps.

Next, find Google Maps field type in the left column, enter API Key in the Google Maps API Key box. Don’t forget to fill in the ID of the Address field created above to the Address Field box.

Create Google Maps Field to Display Map According To The Address In The ‘Address’ Field

Allow the Above Field to Display with Post, Page or the Post Types You Want

After you’ve done with these 2 custom fields, move to the Settings tab, and in the Post types section, select Post or Page, or any Post types you want.

Allow the Above Field to Display with Post, Page or the Post Types

Finally, click Save Changes

Now, you are able to edit any post with the post type you selected and then you will see the two created information fields there. Just enter the address to check.

edit any post with the post type

Step 3: Display Maps in the Front End

Here, I use WooCommerce for my product on my website so I need my own WooCommerce hook and place these code to functions.php file.

add_action( 'woocommerce_after_single_product', 'add_google_map' );
function add_google_map() {
    $args = array(
        'zoom' => 14,
        'marker' => true,
    );
    $map = rwmb_meta( 'map', $args );
    echo $map;
}

In there, ‘map’ is the ID of the Map field above.

If you don’t use WooCommerce, you should add the code below to the file single-[post-type-name].php

$args = array(
    'zoom' => 14,
    'marker' => true,
);
echo rwmb_meta( 'map', $args );

You can refer to some other parameters here to display maps that fit your website.

Now, you will see the map display on your website.

Display Maps in the Front End

Final Words

So now you complete adding maps on your website. By following these steps, it’s quite easy to insert a map on your individual post/page. In case you want to add more markers on your map, refer to this post.

If it’s helpful for you, feel free to give us a comment in the Comment section. Thanks for reading and don’t forget to keep track of our tutorials.

Leave a Reply

Your email address will not be published. Required fields are marked *