How to Add Google Maps in WordPress

If you want to include a map in your contact us page, want to provide a map with your upcoming event or want a map for any other reason, you can definitely use Google Maps. And do you think you will need to hire a professional for doing this? Well, not actually. Adding Google Maps in WordPress is easier than you think.

In today’s post, I will discuss  how you can add Google Maps in your WordPress Website. More specifically I will be covering the following

  1. Adding Google Maps to a Page / Post without using a Plugin
  2. Adding Google Maps to your WordPress sidebar
  3. Adding Google Maps using a Plugin.

Let’s try to do it manually before we do the plugin way.

How to add Google maps in a page or post without using a plugin

In order to add a Google map without using a plugin, go to Google Maps first. Provide your desired location in the search box and press ‘Enter.’ Google will take you to the location.

Then, click the cog icon on the lower right corner of your screen and select ‘Share or embed map’ from the pop-up menu. Click on the ‘Embed map’ tab. This window will show the embed code and the preview of the map. By using the drop-down menu on left of the iframe code, you can change the size of the map. Copy the complete iframe code.

Google-maps-1

Now, paste the iframe code in the posts or pages of your WordPress website to reproduce the map of that location. And that’s it, you have got a working Google Map in your website now, how cool is that!

Keep in mind that you should select ‘Text’ mode when pasting the code. If you paste the code in ‘Visual’ mode, the code itself will be displayed instead of the map.

How to add Google maps in the sidebar

Adding a Google map in the sidebar is almost similar to adding a map to a post. Go to Google Maps, search for your desired location and then copy the iframe code. We discussed the process in the ‘How to add Google maps in a page or post without using a plugin’ section.


Now, get back to your website dashboard. Go to Appearance > Widgets. Find out the ‘Text’ widget, drag it to the sidebar and place it where you want it to appear. Provide a title if you want and then paste the iframe code in the large textarea. Click ‘Save’ and you have got a nice Google map on your website sidebar.

Google-maps-2

How to add Google maps using a plugin

If you want to add one or two maps only, then it is fine to do it manually. However, if you need to include a lot of Google Maps or have to do it regularly, then you should go for a plugin. While there are lots of Google Maps plugins available, we will use MapPress Easy Google Maps for this tutorial.

After activating the plugin, you will find a new menu titled ‘MapPress’ in your website dashboard. We will come to this page later. Let’s add a map in a new post right now. Go to Posts > Add New. In the resulting page, with all the regular sections, you will find a new section titled ‘MapPress.’ This new section will let you attach a Google Map with your post. To add a new map, click the ‘New Map’ button.

Google-maps-3

Provide a title for the map. Then select one of the predefined sizes or provide a custom size for the map. And in the ‘Add POI’ field, write the location of the map and click the search button. Once the location is fixed, click the ‘Insert into post’ button to add the shortcode of the map in the post body. And guess what, you have got a working Google Map in your new post! It is as simple as that.


By following this procedure, you can add custom Google Maps to any post or page you want. Additionally, you can use a map in more than one place by copying and pasting the map shortcode.

Now, let’s get to the plugin settings. Click the ‘MapPress’ link on your dashboard. On the next screen, you will be provided with a page like the following –

Google-maps-4

The following page contains all the setting for the plugin, which are divided into several sections. You will also find links to official documentation, support, contact etc. right after the MapPress logo.

First of all, in the ‘Basic Settings’ section, you will be able to select whether you want to create maps from the Add New Post/Page directly, set the position of the maps etc. Then, in the ‘Map Controls’ section, you can set the various controls of the maps including dragging, keyboard zooming, map types etc.

In the ‘Map Settings’ section, you will find settings that will allow you to enable various links on the map, set the default alignment, set map border, border color etc. The next section is ‘POI Settings.’ In this section, you will find various POI related settings like showing tooltip on mouse-over and the default zoom rate.

The ‘Localization’ section will only be useful if you want to use Google Maps in any other language than English. You can set the direction unit, specify country code etc. And lastly, the ‘Miscellaneous’ section contains some useful options to set the default map size, make the maps adaptive and turning off CSS.

Once you have made all the necessary changes, click the ‘Save Changes’ button and you are done.

Conclusion

So, that was it. Now you know how to add Google Maps in your posts, page or in the sidebar. And you also know how to do that manually. That’s great, right?

However, if you still have any confusion about the process, please let me know. I will try to make them more clear for you. 

Foysal Ahmed

1 thought on “How to Add Google Maps in WordPress”

Leave a Comment