How to Add Google Maps to Your WordPress Site

Are you running a business, planning an event or just want to showcase a map for other reasons? Then it can be incredibly helpful for you to know how to add google maps to your WordPress site. There are two methods that can be used to add Google Maps to any WordPress site: manual method and using a plugin.

The manual methods are somewhat tiresome, and needs experienced hands to get the job done perfectly, while on the other hand, plugins are designed to be easy to use, and even without extensive knowledge, you can create custom and interactive maps on your WordPress website.  By using plugins, you’ll be able to point out your physical location to your customers in a much better manner.

How to Add Google Maps to your WordPress site Without A Plugin (Manually).

If what you want is to insert a simple map without the need for more detailed functions such as custom-location markers, then you can add Google maps without using a plugin.   But how are you going to do it? Below are detailed steps that can help you accomplish this task successfully.

Step 1:  Copy the embed code for the Google maps.

You’ll need to go online and use the Google maps website to create or come up with the map that you would like to embed. For instance, if your intent to insert a place market, you should open that place inn Google maps. On the other hand, if you really need to embed directions, then you’ll have to open direction inside the Google maps. After you’ve got the map which you would like to embed, you’ll need to go to the hamburger menu which is on the top left corner.

Bottom of Form

How to access the embed code

To access the embed code, you will go to the menu list, then select embed/share map.

Open the embed options

Embed options will open up as a share-pop up. By using the drop-down menu, you will be able to choose the best size for your requirements. Although the default size is awesome for most WordPress sites, you can make the map smaller or larger depending on your unique requirements.

After you’ve completed that, click copy html and you’ll be able to copy the embed code.

The WordPress Google Maps embed code

However, you are required to include your API key into the code, which should look somewhat similar to this:

<iframe src=”https://www.google.com/maps/embed/v1/search?key=YOUR_API_KEY¶meters allow Fullscreen></iframe>

Step 2: Add-Google-Maps Embed Code To your WordPress Site

Now that you have copied the embed code and also included your API key into the code, the next thing to do is embedding the code to your WordPress website in the page or post where you would like your map to be. In case you’re using the new Gutenberg-block-editor which was released with WordPress 5.0, you can accomplish that by adding customized html block, then pasting the embedded code right into the block. It’s advisable that you don’t forget adding your API key.

How to add the embed code in WordPress block editor

Click the preview button that’s located above the block and see how the map looks like. But if still using the now less popular classic-TinyMCE editor, you can include the Google maps Embed-code by opening the text tab & pasting your code there.

How to add the embed code in WordPress Classic editor

Adding maps using the classic editor

After you’ve added the code, you will navigate back to the visual tab and you will be able to preview your map.

Adding complicated maps without using a plugin

There are instances when you would like to put your creativity to test on things which include custom annotations and multiple-location markers. In this scenario, you can still do it without using a plugin, but you’ll need to use Google’s My Maps service.

My Maps from Google is a well-known tool that you can use to create and share your customized maps. With it, you can choose to create a map with lots of custom information and markers which display when users click on the markers.

Google My Maps example

Adding Custom Google-maps to WordPress

To add custom maps to WordPress, you need to follow these detailed steps:

Step 1: design Your Map in Google-My-Maps.

You go straight to Google My Maps where you’ll come up with a new map. There is a map building interface that you can use to create your map.

The Google My Maps interface

Step 2: Generate Embed-Code

After finishing building the map, go ahead and generate the embed code. However, you’ll need to make the map public before the code is generated. To do this, click on share button, then point your cursor on change, which is right in the pop-up. Then choose On-Public on the web and click on the save button.

Google My Maps Sharing Settings
Turn on Link Sharing

Once that is complete, go to the drop-down menu which is located near your map’s title, then choose select on my site to create the embed code.

Access the My Maps embed code

A popup will open, and that’s where you can copy the code. As a reminder, don’t forget adding your API key.

The My Maps embed code

Step 3: Add the Embed Code To your WordPress Site.

You can add the embed code that you generated in the above step to your site in the same manner as you would add the code which you generate from the normal Google-Maps website.

How to Add Google Maps to Your WordPress Site Using a Plugin

Other than the manual methods above, you will also find tons of plugins for WordPress websites that can help you embed maps to your website. These plugins offer several benefits as opposed to the manual methods above and among them are:

  • The plugins allow you to create maps that are more complicated with just a single interface.
  • You are able to do everything right within your WordPress dashboard.
  • Some plugins link back to dashboard. For instance, you may be at a position to connect map markers to your WordPress posts.
  • Some plugins are capable of optimizing Google maps for improved performance.

However, for the plugins that are available today, you’ll require to generate your personal Google-Maps API Key in advance before you commence embedding maps. Here are some of the 4 best plugins to help you add Google maps to your WordPress site.

1. Google Maps Widget

Google maps Widget is quite a simple plugin that helps you embed a map with the help of Google maps-static API. Which guarantees a friendly and high-performance approach by embedding static images and not interactive maps.This is a fantastic choice for anyone interested in a simple and light plugin. Once you have activated it, you’ll just need to copy your Google Maps API and paste it to the plugin’s settings. It is possible to add Google Maps to any available widget area on your WordPress site. A visitor will be able to open a larger and more interactive version of the Google map in lightbox.

2. Google Maps Easy

This is another wonderful plugin which you can use to create customized maps with your own annotations and markers. By adding markers, you’ll be able to add your customized icons and include images and text in the marker description and a lot more. You can also have a full control about how your map functions, for instance you can allow your users to zoom it or not. Once you have built your map and satisfied with it, you can choose to embed it using a PHP function or a shortcode.

3. Intergeo

Intergeo is a massively popular WordPress plugin for creating customized maps with highly personalized markers. With this plugin, you also have full control over the functionality of the map. After you’ve activated the plugin, you can start building your maps from your WordPress dashboard.

4. Gutenberg Block (For Google-Maps Embed)

This is a simple and easy to use plugin that adds a dedicated Google Maps-block to a new WordPress Gutenberg-block editor. This block embeds any address and also chooses zoom level, dimensions, a static map or interactive map. Gutenberg Block has some limitations though- as it doesn’t enable you to create custom maps. However, you’ll find it more convenient, especially when you are using the new-block editor and in need of a simple way to incorporate a few simple maps.

Conclusion

If your aim is to add a simple map on your website, you can incorporate Google Maps to your WordPress site without using a plugin with the help of the built-in embed code. Alternatively, you may use the Google My Maps tool to come up with your custom map, then embed it. Other than the manual methods, there are plenty of WordPress plugins which you can use to add Google maps to your WordPress site. Most of these plugins give you lots of control just right within the WordPress dashboard.

Regardless of the method that you select, you should pay attention to the impact of using the maps on your site. You should be able to balance between good performance and having a functional Google map that your customers can use to locate your business. Use Google maps on your site when you believe they are absolutely necessary and it’s also of essence that you employ tactics such as lazy loading and placeholder images as this minimizes the negative effects that Google maps can have on the performance of your website.

Leave a Comment

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

Share via
Copy link