Embed Google Maps In WordPress Site

How To Embed Google Maps In WordPress Site?

What’s the Internet’s favorite way to find the locations of brick-and-mortar businesses?

If you guessed Google Maps, pat yourself on the back. Google Maps is by far and away the most popular location finder online.

Today, if you want your website visitors to drop in and visit you at a physical location, it’s up to you to make their life as easy as possible. Don’t make life hard for them by making them head over to Google Map and type in your address. Not only is putting a ready-made Google map on your site ridiculously simple, but it’s also bound to boost your conversion rate.

Today, I’ll show you how to do that by guiding you through three ways of incorporating Google Maps into your own WordPress website.

There are THREE ways to which you can embed Google Maps to your WordPress Site.

Let's study them one by one in great care.

1. The Manual Method

If you’re only looking to include a map on a single page of your site you’ll save time by taking a manual approach.

You can embed a Google Map into your WordPress.com blog using the following instructions.

1. Visit Google Maps.

2. Type in any street address or geographic location and click the Search button.

3. Select Share and a popup will appear, as illustrated below.

4. Select the Embed tab as above and copy the code from the box. The code will begin with <iframe.

5. In your WordPress.com homepage, go to Posts → Add or Pages → Add (or open an existing post/page in editing mode). Open the HTML Editor and paste the code directly into your post or page.

6. Click Save Draft, Update, or Publish depending on the status of your post or page. If you refresh the page, you will notice that the code has changed. WordPress has converted the HTML code into the working shortcode.

Here is an example of what the embedded map will look like.

Embedding A Custom Map

You can embed a Custom Google Map into your WordPress.com blog using the following instructions.

1. Visit Google Maps.

2. Click on the "Menu" icon found in the upper left corner of your browser window.

3. Select "My Maps", and choose either a map you have already created or to create a brand new one.

4. Once you have the map you would like to use, click on "Share".

5. A window will appear, as shown in below image.

Note:- If your window says something other than “Public on the web”, click on "Change" and select "Public".

Save those changes and close out of the Sharing window.

6. Click the More icon next to the Share button (it looks like three vertical dots), and a menu will appear. Select "Embed on my site" from that list.

7. This will open a window with an embed link. Copy the entire code.

8. In your WordPress.com homepage, go to Posts → Add or Pages → Add (or open an existing post / page in editing mode). Open the HTML Editor and paste the code directly into your post or page.

9. Click Save Draft, Update, or Publish depending on the status of your post or page. If you refresh the page, you will notice that the code has changed. WordPress has converted the HTML code into the working shortcode.

Here is an example of what the embedded map will look like.

Additional Information

1. When adding Google Maps to your WordPress.com blog, do NOT manually open the shortcode as you normally do with other services (i.e. do not begin typing the shortcode and then paste the Maps code). This will not work.

2. If your code isn’t working, try using a physical address. Addresses created with longitude and latitude coordinates rather than a physical address may not give you a workable code.

3. You can insert multiple maps into a single post or page.

4. To change the dimension of the map, click on the drop down menu during step 4 above. This will automatically update the iframe code.

5. To make text flow around the map, you can add an alignment option in the shortcode.

align=”left” – The map will appear on the left, with text flowing to the right.

align=”right” – The map will appear on the right, with text flowing to the left.

2. The Plugin Method

The beauty of WordPress is that there’s a plugin for everything to make all our lives that little bit easier. The 19,000-strong database of user-contributed plugins always comes to the rescue when there’s any difficult function that needs tackling.

If you need a map on several pages, or if you’re not good with code and would rather have a plugin take care of map creation and embedding for you, then it’s a good idea to go with a Google Maps plugin, which makes the whole process almost completely hands-off.

My personal choice is MapPress. Having accumulated over 660,000 downloads so far, it seems like the vast majority of WordPress users agree with me.

The plugin is completely free and can be found by clicking Plugins > Add New in your WordPress Dashboard, then searching for MapPress Easy Google Maps.

Once you’ve found it, be sure to download, install, and activate the plugin. If done correctly, you’ll now be able to see a MapPress settings page link in the side menu. You don’t need to go to this tab, however — all maps can be created and embedded right from the post/page editing screen.

To illustrate how the plugin works, click to create a new post. When you’ve done this, scroll down below the text editor and you should find a brand new meta box, titled MapPress. Click on the arrow to open up the full meta box then select New Map.

You’ll be presented with quite a few options (you can even take a look at a map of our planet as a whole … but that won’t be too helpful for visitors).

Give your map a title, then choose your dimensions. You’re presented with the same three different predefined sizes, but personally I recommend customizing the dimensions to fit well with your content area and website design.

Next, you have to get the map to display your desired location. You have two ways to do this: by searching for the right location with the address, or just hitting the My Location and letting the plugin find out where on the planet your computer is.

Once you’ve done this you should see a preview version of your map, complete with the little red placemarker. If everything’se well and good, click to insert the map into your post.

The plugin will automatically assign your map with an ID number and shortcode. As this is your first map, you should now see the shortcode [mappress mapid=”1″] in the text editor. If you want to insert the same map on a different page, remember the shortcode and you won’t need to go through the process of creating a new map each time.

To check everything is working properly, let’s preview our post and view our map in all its glory.

That’s it! You now know how to embed a Google map on a post or page.

3. The Widget Method

Now, some of you won’t just want your map on a single page, you’ll want it visible onevery page. The easiest way to do this is to put your map in a widget, either in the sidebar, header, or footer.

The one drawback with MapPress (and most other map plugins) is that it doesn’t facilitate this, so we’re going to need a new plugin.

My recommendation is the Google Maps Widget — find it, install it, and activate it in the same way you did with MapPress.

Now, click Appearance > Widgets in the sidebar to navigate to your sidebar and footer editing screen. To place a map in a sidebar, you’re going to need to drag the Google Map Widget into the appropriate widgetized area for where you want your map to be. To demonstrate, I’ve put my widget in the right-hand sidebar on my home page.

When you’ve done this, open up the drop-down menu for your options. Click on Thumbnail Map, give your map a name, set your location, and then play around with some of the options to customize your map’s appearance. You can set the map size, pin colour, pin size, level of zoom, and the text that appears above and below your map.

The settings in the Thumbnail Map will determine what your visitors will see in the sidebar. In the Link To drop-down, you’ll be asked where you want your visitors to be sent if they click on your map (you could send them to your contact page, for example). One of your options is a Lightbox Map which will display a larger, more prominent version of your map in a lightbox. If you choose this setting, you can configure this map’s appearance under the Lightbox Map setting.

Click the Save button in the bottom right of the widget box to save your widget settings.

To see your brand new map widget, refresh your website, and take a look.

And there you have it. You should be able to easily insert a Google Map into your website manually or with a plugin, in a page/post or in a widgetized sidebar.

If you have any difficulties or questions (or tips!), feel free to use the comment section below.

Please share it to your friends and subscribe to our blog to get latest updates from us.