How to Embed a Google Map in WordPress

3408

If you look at business pages very often they will have that ever so handy Google map telling you where they are, sometimes you can even interact with the map to get directions without using it externally. When you are looking at where a shop is for example, it’s a great feature to have as often it puts it into perspective for us and leaves you thinking ‘oh it’s only 20 minutes away’ or ‘oh it’s really easy to get to’. It’s pretty neat when you think about it that way.

But, how do you go about it? Here we will have a look at embedding it into WordPress with and without plugins.

Let’s start with the easy option – A straight embed from Google maps

Embed Directly

You may not think it is the easy option but it really is and even the WordPress beginner can get a handle on this.

Go to Google maps on your browser and search for the address you need, say your company address. Found it? Great! Now all you have to do is click the ‘share’ button and then the tab ‘Embed Map’. Here you can choose what map size you want, consider this carefully as a lot of sites often us huge maps and it can look unsightly however, choose a map too small and it can be difficult to work with. The suggested size is normally medium. All you need to do is copy the iframe text and paste it into a page on your WordPress site.

The downside to this however, if you want to change the map at any time, the size or address for example, you have to repeat the process again and practically replace the whole map just as you did in the beginning. Okay so it isn’t that problematic and there are far worse problems you can face but other options do allow for editing without having to repeat yourself.

Plugins

Firstly pop along to WordPress.org and search for map embedding. There are lots right? In fact there are hundreds of neat plugins that will help you achieve your goal but they will differ slightly in how it is done. One of the most popular plugins is MapPress.

MapPress will add an interactive map that can be customized with custom HTML text and map markers. It has a variety of neat features and even includes street view so your customers can get as close as possible to the neighborhood.

Installing and Configuring MapPress

After you have installed the plugin in the usual manner, you will need to pop into the plugin settings and paste the Google Maps API into the Browser API key field.

(Note – To use this plugin, you will need to have an API key to proceed. It is a fairly simple process, you just need to obtain the key from the Google console and follow the set up steps including registering a project.)

You will see there are a variety of settings already in this initial set up box such as where to display the map and what type of post. Click save to save the changes and head on over to the page you want to edit. Look for the box MapPress that your plugin has created and click on the new map button to get started. From here you can change the title of the map, select a location and customize it to however you want. You can also have as many markers as you want. Say for example you are a site offering to show where all the gyms are in your area, you can allow multiple markers and show them all.

Once you are ready, just click on that Insert into post button. Easy!

Google Maps Builder

Another highly recommended plugin, it is noted for its customization options and themes. Making it a good ‘all in one’ plugin if you want to customize your theme as well. As with MapPress all you need to do is install the plugin and the go to the page you want to edit. There you will find the box for it and can select your map. Have a play with the different customization tools on offer as well.

Consider a widget for a smaller bitesize map. There are many advantages of using this little function, one is that once you click on the widget the map will open up in a pop up with a larger view. (Okay so this may also be a down fall if you don’t want pop ups) but it is a good compromise on space if you don’t want the map to be a main focus but still want to offer that feature. You can also use your own image as a pin icon so it isn’t all bad.

Most beginners find themselves using the iframe embedding straight from Google option because it is the easiest to understand but as they progress they often swap this in for a plugin or more complex methods such as a full Java control. However, the choice of this comes down to your needs and what you want from it. Don’t force your hand to add something that is beyond your needs but explore your options.