WPLift is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

A Step-by-Step Guide on Adding Google Maps to Your WordPress Website

Last Updated on February 17th, 2023

Tags: , ,

Are you searching for a way to add Google Maps to your WordPress site?

If you want to make it simple for your visitors to discover your store or other places of business, or if you want to highlight areas that your visitors might find interesting, then incorporating Google Maps into your WordPress website is the ideal option.

You may include a map view image, a street view image, or even detailed travel directions. 

In this post, we’ll share how to add Google Maps to WordPress without a plugin, as well as some of the best Google Maps WordPress plugins. Let’s get started. 

What is a Google Map?

If you’re not aware of the Google Maps Platform, now is a good time to learn about it, especially if your company has a physical site. Users may embed a Google map on their website or in search results using the Google Maps Platform.

The most essential tool for local SEO is Google Maps. It is used by millions of tourists to get directions to local businesses, attractions, and private locations. The app is also significant because it is used on mobile devices. The mobile app is a strong marketing tool for your company, especially if the location function is enabled. 

If done correctly, Google Maps marketing may be one of the most effective methods to increase your visibility in local search results. Furthermore, you will be regarded as a local expert in your field, as well as the go-to location for local clients looking for a certain product or service.

What makes Google Maps so important for your website?

There are several reasons that make Google Maps so important:

  1. It saves consumers the process of opening a new browser window, leaving your website, and looking for instructions by assisting customers or website visitors with directions to your company. Customers may use the map on your website to find their way around. 
  2. Your company’s contact information is easily accessible. Your company address, phone number, website, directions, reviews, and review stars are all provided through an embedded Google Map.
  3. A Google map can show local locations of interest, such as parking lots, restaurants, theaters, and parks, among other things. If visitors are unsure where your business is located, they might refer to surrounding places. 
  4. The Map might also help to keep people on your site for longer.

How to Add Google Maps to WordPress Manually?

People who like to manually add items to their WordPress websites will always find a way, and adding a Google Map is no exception.

To add a Google Map to your website, follow these steps:

Article Continues Below

  1. Go to Google Maps
  2.  In the upper left, type the name of the company or place.
how to add google maps to wordpress manually
  1. When the business is finished populating, you’ll see a Share button next to the business’s name. Click the “Share” button. 
how to add google maps to wordpress manually
  1. A new pop-up window will appear, allowing you to share the map. Choose “Embed a Map” from the drop-down menu.
how to add google maps to wordpress manually
  1. Choose the size of the map you wish to use on your website. “Small, Medium, Large, Custom Size” are your options.
  2. Copy the HTML code for the iframe> tag. 
  3. Navigate to the website where you wish to embed the Map.
  4. Copy the HTML code for the iframe> tag. 
  5. Navigate to the website where you wish to embed the Map.
  6. That is all there is to it. It’s a very straightforward procedure to follow.

How to add Google Maps to WordPressUsing Plugins?

If you simply want to embed a Google map for one place on your WordPress site, the first technique is sufficient. However, if maps are an essential part of your site’s core content and you need to include maps in your articles on a regular basis, we recommend utilizing a plugin.

WP Google Maps 

how to add google maps to wordpress with WP Google Maps

Inserting Google Maps into your WordPress posts and pages is simple with the free WP Google Map Plugin. You may use the plugin to make numerous places, each with its own unique marker. After that, you may add your places to a map. 

After the map has been produced, you may use the appropriate shortcode to incorporate it into your text. Your visitors may navigate around the map and zoom in and out to learn more about the places.

Pros

  • The plugin’s capabilities enable you to generate as many different maps as you need and use them across your website. 
  • This enables you to highlight a variety of locations, making this plugin a fantastic choice for anybody who wants to publish local area guides on their website.
  • All of the Google Maps you generate with this plugin are mobile-friendly.

Cons

  • This plugin-free version may not have all of the functionality you want from a shop finder.

Price

  • Pro Add-On – $39.99 with 3 Site License
  • Developer Bundle – $99.99 with 10 Site License
  • Lifetime Licence – $199.99 with Unlimited Site License

Steps on how to add Google Maps to your website

  1. You should see a new Maps link in the left navigation menu of your WordPress Dashboard after installing the WP Google Maps plugin.
  1. The page shown below may be accessed by clicking on the Maps link. Once you’ve upgraded to the Pro Add-on, you’ll be able to update your map or create new ones here.
  1. To edit the map, click the Edit link. This will lead you to the Create Your Map page, which is seen below.

General Settings

  • Shortcode – This is the shortcode you’ll need to embed your map in a post or page (this will be explained in detail below). 
  • Map Name – Change the Map’s name by editing this. 
  • Map Dimensions – This is where you may choose the size of your map (width and height). If needed, the values can be adjusted from pixels to percentile ( percent ). Set the width and height of your map to 100% and 400px, respectively, to make it responsive (mobile-friendly). 
  • Save the map by clicking the Save Map button. Your map will reload with the new dimensions you specified.
  • Zoom Level: Drag the blue circle on the bar to adjust the initial Zoom Level for your displayed map. 
  • You may also use the mouse scroll wheel or zoom controls to adjust the zoom on the Preview Map in the lower part of the page. Save the map by using the Save Map button. 
  • Starting point: Click and drag the Preview Map to the chosen starting point with your mouse, then press the Save Map button. 
  • Map Alignment: Adjust the display map’s alignment. 
  1. Click the Save Map button to save your changes to your map.
  2. You must copy and paste the Map Shortcode into a Post or Page to see your map on your website. At the top of the Create your Map page, you’ll see the Map Shortcode. 

This Shortcode should be pasted into a Post or Page. This is how it should look: 

  1. After you’ve done altering the content of your post or page, click the Publish button. 

On the published post or page, your map should appear (front-end).

Get WP Google Maps

Hero Maps Premium

Hero Maps Premium is a stunning Google Maps solution that lets you show responsive maps in full screen or with a set width. 

You may use one of three icon sets to add professional-looking markers to your maps, and you can even submit your own icons. To place a marker on the map, just drag & drop an icon onto it.

Pros

  • Excellent feature set 
  • Leader in the WordPress Maps Plugins category 
  • Best for Ease of Use

Cons

  • Support only includes emails

Price

  • Regular license: $20

Steps to Add Google Maps to Your Website

  1. HeroMaps Premium is available for download through CodeCanyon. 
  2. Navigate to Plugins >> Create a New >> Installing the Plugin 
  3. To upload HeroMaps, navigate to the zip file you just obtained from CodeCanyon and follow the steps.
  4. To activate HeroMaps Premium, click the activate link.
  5. Navigate to HeroMaps in your Admin section after HeroMaps Premium has been activated. The HeroMaps Dashboard will be the first thing you see
  6. To make your first map, go to Maps and select Add New from the drop-down menu. In the text box that appears, type the name of your map and then click the Add New button.

You’ve just finished your first map, which is a huge accomplishment. Great Job!

Setting Up Hero Maps Premium

  • After you’ve finished creating your map, you’ll be directed to the setup screen, which will look like this:
  • The default map will be displayed on this screen; you may either left-click on the map and drag it to the desired location or use the Search Box. Zooming in and out using the mouse wheel is disabled by default, but you may use the normal control on the left-hand side of the map to zoom in and out.
  • Keep in mind that if you pick the responsive option, your map must be put in a responsive container. 
  • While saving between each step isn’t technically essential, we do recommend selecting the Save icon in the upper right-hand corner whenever you’ve finished making your edits.

Get Hero Maps Premium

Article Continues Below

Otter Blocks Google Maps Block

how to add google maps to wordpress with Otter Blocks Google Maps

If you require a sophisticated WordPress design toolkit, Otter was built for you. The Otter Blocks library allows you to go extremely deep into layout and style modification for virtually every block, so if you need an advanced WordPress design toolkit, Otter was made for you. The customization capabilities and general design approach are one of the most apparent aspects, despite the fact that the number of accessible blocks is lower than others.

Pros

  • maps can be customized, including position, zoom level, and more. 
  • Color schemes and other choices may be used to personalize your maps. 
  • Create a map with numerous locations and markers. 
  • Organize your map library with ease.

Cons

  • A limited number of blocks are available. 
  • There isn’t a designated starting theme.

Price

  • FREE

Steps to Add Google Maps to your website

  1. After you’ve installed Otter Blocks, your dashboard will have a new section named Otter under the Settings tab. Find a Maps section with a box where you can enter your API key, which you must do before you can start making maps:
  1. Visit the Google APIs Dashboard to obtain this key. You should be able to access this dashboard without having to sign up for anything if you already have a Google account.
  2. Select the blue Create Project button towards the top of the screen in the Google APIs dashboard:
  1. On the following screen, select Create. Then you’ll be able to give your project a name:
  1. You’ll be brought back to the dashboard if you click Create again. Search the API Library for “Google Maps JavaScript API” and choose Enable APIs and Services at the top of the page. Select Enable once you’ve discovered it.
  2. On the following screen, in the top-right corner, click the Create Credentials button. 
  3. Then, on the following screen, choose What credentials do I require? You’ll be given an API key, which you may copy right now.
  4. Copy the key and paste it into the Google Maps API Key box on your WordPress site:

Remember to save your modifications! You’re now ready to begin creating your map.

  1. To make your first map, go to the Otter section and choose the Google Maps block. You’ll be provided with a variety of alternatives right away:
  1. Add a Marker button that will allow you to choose a map spot and add a marker. You may give the marker a name, select a style, and input a location.
  2. You may also add and format text that will appear when a user clicks on the marker in the text box. 
  3. After that, you can begin personalizing your map by using the map builder’s various features. Let’s take a look at each tab individually.
  • Positioning & Zooming

You may zoom the sample map in and out and drag it anywhere you like to establish a specific zoom level and location for your map. It will appear on your site just how you put it up in the editor. 

You may also choose between terrain, satellite, road, and hybrid maps.

  • Controls
how to add google maps to wordpress via plugin

You may choose what kinds of options users have in the Controls section. This includes whether or not they can drag the map and whether or not they have access to street view.

  • Styles
how to add google maps to wordpress via plugin

You may change the appearance of your map in the Styles section. You may also pick from a variety of pre-made map designs or make your own.

  1. Don’t forget to save your map once you’ve completed it. You’ll see it appear on the page, along with buttons to adjust the map’s width, modify the design, or delete it.

That’s it! Your map should now look great on the front end of your website.

This approach may be used to post the same map in different locations or to add a range of maps to your website. That’s all there is to it when it comes to integrating Google Maps with WordPress.

Get Otter Blocks Google Maps Block

Add Google Maps to Your WordPress Site Today—Summary

A Google Map is far more engaging and dynamic than just putting an address on your website. It may also help your site’s local SEO, give simple directions, and promote good customer feedback.

Article Continues Below

You may embed Google Maps on your own website using the following methods:

  1. Add Google Manually – Although this approach is the most difficult and needs some technical expertise, it is also the most adaptable.
  •  Simply enter in the address of the location you wish to see or search for a location on the Google Maps website.
  • Go to the right-hand panel and click the link button. The embed code will be shown as a result of this. To further adjust the appearance of the map on your site, copy the iframe code or click on the “Customize and preview the embedded map” button.
  • Copy the code and paste it into a post, page, or template on your WordPress site.
  1. WP Google Maps – This tool is easy to use and very configurable, allowing you to place your map in any post or page.
  • Once you’ve upgraded to the Pro Add-on, you’ll be able to update your map or create new ones 
  • To edit the map, click the Edit link.
  • You must copy and paste the Map Shortcode into a Post or Page to see your map on your website
  1. Hero Maps Premium – it is an outstanding plugin with a slew of useful features. You can build an endless number of maps and markers using it.
  • First Activate Hero Maps Premium.
  • Select Add New from the drop-down option under Maps. Type the name of your map in the text box that opens, then click the Add New button.
  • Then, Set up your Hero Maps Premium. 
  1. Otter Blocks – This plugin will assist users in easily creating and customizing maps to fit their specific requirements. You may create as many maps as you like, save, edit, and even clone them using the sophisticated UI map builder.
  • In WordPress, paste your Google Maps API key. 
  • Create a new map and use the plugin’s options to customize it. 
  • Use the given shortcode to embed the map on your website.

We hope you found this post helpful in integrating Google Maps into your WordPress blog!

We’re excited to see how it works for your website!

A team of WordPress experts that love to test out new WordPress related software, WordPress plugins and WordPress themes.