How to Add Google Maps in WordPress

How to Add Google Maps in WordPress

If you’ve built a website for your local business, especially a brick-and-mortar store, then you should have a Google Maps section on your WordPress website highlighting its location. Embedding the map into your website is also excellent for your local SEO efforts since Google will rank it higher in search results.

Luckily, embedding Google Maps with your store or office location(s) is straightforward in WordPress. Read on to get started.

How to Add Google Maps to WordPress Without API or Plugin

This is the most straightforward way of adding Google Maps to your WordPress blog or website. It involves two broad steps: copying the embed link and pasting the link into a WordPress code block. Follow the steps below.

  1. Open Google Maps on the web.
  2. Type in or search for the location you want to embed in the search field.
    Company location search
  3. Click Share, navigate to Embed a map, select your desired size, and click Copy HTML.
  1. Log into your WordPress dashboard.
  2. Click Pages, then Add New Page (You may use a new post or edit an old page if you please).
    Add new page option in WordPressAdd new page option in WordPress
  3. Click the + button, then click Custom HTML.
    Opening custom HTML in WordPressOpening custom HTML in WordPress
  4. Paste the Google Map embed link you copied. Then Save and Publish your page.
    Publishinh the Short LinkPublishinh the Short Link

Adding Google Maps With API on WordPress

If you are blogging on WordPress, you can embed Google Maps with an API, though you must use a Maps plugin to achieve this. In this example, we use the WP Go Maps plugin, but there are others you may try. But first, we need to get the API.

How to Get the Google Maps API

You may use free API features for small businesses, but the advanced APIs cost around $7 per month and scale up depending on how many impressions you receive. With the API obtained, you can add a Google Map to your website. To get a Google Map API, you must have properly set up your billing in Google Cloud Console. Once the billing is set up, continue to the steps below on Google Cloud Console.

  1. Click the Hamburger on the top left, and click APIs & Services.
    Google APIs & ServicesGoogle APIs & Services
  2. Select Enable APIs and Services.
  3. Click the Hamburger, hover APIs & Services, then click Library.
    Opening API LIbraryOpening API LIbrary
  4. Under Maps, click View All.
  5. Click Maps JavaScript API, and click its Enable button.
    Enabling Map API in for WordPressEnabling Map API in for WordPress
  6. Return to the API Library page and repeat Step 5 for Directions API, Geocoding API, Geolocation API, and Places API.
  7. Click the Hamburger, hover APIs & Services, then click Credentials.
    API credentials for WordPressAPI credentials for WordPress
  8. At the top of the screen, click the Create Credentials option and select API key.
    WordPress API credential keysWordPress API credential keys
  9. Select the Edit API key option.
    Edit the API KeyEdit the API Key
  10. Select the Websites radio button, and click ADD.
    API Edit optionsAPI Edit options
  11. Input your website URL, click Done, followed by Save.
    Save API EditsSave API Edits
  12. Click the Show key option and copy your API key.
    Copying the API keyCopying the API key

Downloading the WP Maps Plugin

We will be using WP Go Maps for this example. Follow the steps below to download it.

  1. Open the WordPress dashboard, click Plugins from the menu bar, and click Add New Plugin at the top of the page.
    Adding New PluginAdding New Plugin
  2. Search for WP Go Maps and click the Install Now option for the first plugin, then click Activate once the installation is done.
  3. Click Settings for Maps on the left pane, click the Advanced tab, input your API key, and click Save Settings at the bottom right.
    Maps API Key additionMaps API Key addition
  4. Select Maps on the left pane, add your address to the Address/GPS field, and click the Add Marker button.
    Add Map Marker on WordpressAdd Map Marker on Wordpress

Adding a Map Block

With the API connected, WP Go Maps will create a block of code that you can use on your website:

  1. Open your WordPress Dashboard and open the post or page where you need the map.
  2. Select the + button at the top, search for Map, and select Map.
    Adding Maps to pages in WordPressAdding Maps to pages in WordPress
  3. Now Save and Publish the Page.
  4. Use the additional options on the right to customize how the block looks on the page.

Adding a Widget

Alternatively, you can add a small widget to your map, such as the website’s footer. Here’s how:

  1. Open the WordPress admin panel.
  2. Select Appearance and click Widgets.
    Opning WordPress WidgetsOpning WordPress Widgets
  3. Expand WP Go Maps, select a location, and click Add Widget.
    WP Go Mmaps WidgetWP Go Mmaps Widget
  4. Edit the widget’s dimension and how the label will be named on the map.

While WP Go Maps should get the job done, it’s not the only plugin that can do so.

You can browse the WordPress plugin store to find other plugins that embed map blocks with Google Maps. Some of the better options include:

  • Google Maps Widget
  • Google Maps Easy
  • Intergeo

Once you download and enable the plugin, each should have a brief tutorial on how to plug in your Google Maps API key to allow WordPress to use the map from Google. The rest is up to you.

Use a Map-Integrated WordPress Theme

Apart from using plugins to create a map for your website, you can also select a theme with the option from the get-go.

However, you will unlikely find a free theme with Google Maps embedding. One of the better versions is Divi, which costs roughly $90 per year if you use a subscription. However, its other features, such as AI-assisted website creation and many professional templates, make it an excellent pick.

Put Yourself on the Map with WordPress

By embedding the Google Maps location of your store to your WordPress site, you make it easier for potential customers and clients to find your local business. Play around with the map placement and create a straightforward contact page for the best results.

Next, you should learn how to set a default theme in WordPress.

FAQs

Where do I put the Google Maps API key in WordPress?

You may embed it in a WordPress code block or using a plugin. Some of these plugins may offer widgets where you embed the API key.

How do I add a Google map to WordPress without plugins?

The specific process will depend on the plugin you use. However, API keys usually would go into an API field found in the Advanced option of your plugin.

How to Add Google Maps in WordPress

Source link

Picture of Author: Amanda Jones
Author: Amanda Jones

Amanda Jones specializes in content marketing. She holds a Master's degree in Marketing Management from the University of Florida and a Content Manager Professional Certificate from the University of Miami.

Newsletter

Join our mailing list to receive the latest news directly in your email inbox.