How to Add Google Maps in WordPress (The RIGHT Way) (2024)

Do you want to show Google Maps on your WordPress website?

If you’re running a local business, then displaying Google Maps on your site can help users easily find your location. It can also help improve your site’s search engine visibility so you can attract more website visitors.

In this article, we will show you how to add Google Maps in WordPress.

How to Add Google Maps in WordPress (The RIGHT Way) (1)

Why Add Google Maps in WordPress?

Did you know that Google Maps is the most popular navigational app on all platforms?

If you have an office or physical store address, then adding Google Maps to your WordPress website makes it easy for users to quickly locate your physical stores, restaurants, or retail outlets. This helps you attract more customers and generate more business.

Not only that, but embedding Google Maps can also improve your WordPress SEO. According to Google, 46% of all searches are local. Adding Google Maps to WordPress can boost your local SEO and improve your visibility in local searches.

Now there are two ways to embed Google Maps in WordPress, and we’ll show you both.

The benefit of the second method is that it follows all local SEO best practices, so if you use it, then Google will start to include your location on Google Maps. It will also display your business information like name, logo, address, phone, and open hours in local search results.

That being said, let’s see how you can add Google Maps to WordPress. Below are the quick links that you can use to go to the section you prefer:

  1. How to Add Google Maps in WordPress Without a Plugin
  2. How to Add Google Maps to WordPress With a Local SEO Plugin
    1. Expert Guides on Using Maps in WordPress

    How to Add Google Maps in WordPress Without a Plugin

    If you just want to quickly embed Google Maps in a WordPress post or page, then you can use the default iFrame method.

    Simply go to the Google Maps website and type in any street address in the search area.

    How to Add Google Maps in WordPress (The RIGHT Way) (2)

    Next, you need to click the Share icon, and it will show a popup with the option to either Send a location link or Embed a map.

    You need to select the ‘Embed a map’ option.

    How to Add Google Maps in WordPress (The RIGHT Way) (3)

    After that, simply copy the HTML code for Google Maps, and then open the page where you want to embed the map.

    Inside the block editor, you need to add a Custom HTML block.

    How to Add Google Maps in WordPress (The RIGHT Way) (4)

    Now you can simply paste the embed code you copied from Google Maps.

    After that, you need to update or publish the page to preview the changes.

    How to Add Google Maps in WordPress (The RIGHT Way) (5)

    This method works for quickly embedding Google Maps, but it doesn’t give you maximum SEO benefits.

    If you are a small business, restaurant, or online store with either a single or multiple physical locations, then we recommend using the next solution to maximize your Local SEO rankings because it uses proper open graph data to help you rank higher in Google.

    How to Add Google Maps to WordPress With a Local SEO Plugin

    The best way to add Google Maps and optimize your site for local SEO is by using All in One SEO (AIOSEO).

    It’s the best SEO plugin for WordPress because it helps you get higher SEO rankings without editing code or hiring a developer. Over 3 million professionals use AIOSEO to improve their search engine rankings.

    How to Add Google Maps in WordPress (The RIGHT Way) (6)

    For this tutorial, we will be using the AIOSEO Pro version because it includes the Local SEO feature and other powerful optimization options. There is also a free version of AIOSEO that you can use to get started optimizing your site for search engines.

    First, you’ll need to install and activate the AIOSEO plugin in WordPress. For more details, please see our tutorial on how to install a WordPress plugin.

    Upon activation, the plugin will launch the setup wizard. You can click the ‘Let’s Get Started’ button to configure the plugin. If you need help, then please refer to our guide on how to properly set up All in One SEO in WordPress.

    How to Add Google Maps in WordPress (The RIGHT Way) (7)

    Next, you can head over to All in One SEO » Local SEO from your WordPress dashboard.

    Then click the ‘Activate Local SEO’ button to get started configuring the local settings.

    How to Add Google Maps in WordPress (The RIGHT Way) (8)

    Once the Local SEO addon for WordPress is activated, you can add a single location or multiple locations in AIOSEO and display them on Google Maps. We’ll show you how to add both to your website.

    Adding a Single Location

    To add your locations, business information, open hours, and more, you first need to go to All in One SEO » Local SEO and open the ‘Locations’ tab.

    If you have a single physical location, then keep the ‘Multiple Locations’ option set to No.

    How to Add Google Maps in WordPress (The RIGHT Way) (9)

    After that, scroll down to the ‘Maps’ section to pin your exact location.

    Simply enter your address in the ‘Enter a query’ field, and Google Maps will show your location.

    How to Add Google Maps in WordPress (The RIGHT Way) (10)

    Once you’ve entered your location, don’t forget to click the ‘Save Changes’ button.

    Adding Multiple Locations

    If you have more than one physical location, then you’ll need to enable the ‘Multiple Locations’ setting in the ‘Location’ tab in Local SEO.

    How to Add Google Maps in WordPress (The RIGHT Way) (11)

    After that, a new Locations menu will appear in your WordPress admin panel.

    Go ahead and navigate to Locations and then click the ‘Add New’ button.

    How to Add Google Maps in WordPress (The RIGHT Way) (12)

    Once you are in the WordPress editor, scroll down to the ‘Map’ section.

    Here you can enter your address in the ‘Enter a query’ field.

    How to Add Google Maps in WordPress (The RIGHT Way) (13)

    After entering your location on the map and adding location information, go ahead and click the ‘Publish’ button.

    You can now repeat this step and add as many locations as you want for your business.

    Once you have finished adding your locations, you can go to the ‘Maps’ tab back in the All in One SEO » Local SEO menu.

    Here you will have to enter a Google Maps API key.

    How to Add Google Maps in WordPress (The RIGHT Way) (14)

    Now, let’s see how to create an API key for Google Maps.

    Creating a Google Maps API Key

    To start, you’ll need to visit the Google Maps Platform website and click the ‘Get Started’ button.

    How to Add Google Maps in WordPress (The RIGHT Way) (15)

    After signing in with your Google account, you’ll need to set up a billing account.

    Google Maps Platform has pay-as-you-go pricing, and they offer the first $300 of monthly usage for free for all users. For most websites, that will easily cover a simple map embed like the one we’re creating in this tutorial.

    Don’t worry, they will not charge you any fees unless you manually upgrade to a paid account.

    To get started, go ahead and click the ‘Create Billing Account’ button.

    How to Add Google Maps in WordPress (The RIGHT Way) (16)

    Next, you can select your country and choose what best describes your organization from the dropdown menu.

    Once you’ve selected this information, click the checkbox for Terms of Service and then click the ‘Continue’ button.

    How to Add Google Maps in WordPress (The RIGHT Way) (17)

    On the next screen, you’ll need to enter your phone number for verification.

    Once you’ve done that, click the ‘Send Code’ button.

    How to Add Google Maps in WordPress (The RIGHT Way) (18)

    After verifying the code, the next thing to do is enter your business name, payment method details, and billing address.

    Once you’ve entered these details, click the ‘Start my Free Trial’ button.

    How to Add Google Maps in WordPress (The RIGHT Way) (19)

    Next, you’ll be asked a series of 4 questions about your organization and how you’ll use the Google Maps Platform.

    Google Maps will ask about your primary goal for using the platform, which industry you’re in, select a use case, and your company size.

    After answering these questions, go ahead and click the ‘Submit’ button.

    How to Add Google Maps in WordPress (The RIGHT Way) (20)

    You’ll now see a popup with your Google Maps API key.

    You can copy and save this key in a text file for future use.

    How to Add Google Maps in WordPress (The RIGHT Way) (21)

    Now that you’ve created a Google Maps API key, you’ll need to head back to your WordPress dashboard to enter it in AIOSEO Local SEO settings.

    Configuring Google Maps Settings in WordPress

    You can now go back to All in One SEO » Local SEO from your WordPress dashboard and then navigate to the ‘Maps’ tab.

    Go ahead and enter the Google Maps API Key in the ‘API Key’ field. You’ll see a preview of the map in AIOSEO as soon as you add the key.

    How to Add Google Maps in WordPress (The RIGHT Way) (22)

    Next, you can scroll down to edit the map settings.

    AIOSEO lets you display Google Maps using a Gutenberg block, shortcode, widget, or PHP code. It also lets you choose different map styles and add a custom marker to your map.

    How to Add Google Maps in WordPress (The RIGHT Way) (23)

    Don’t forget to click the ‘Save Changes’ button when you are done.

    Displaying Google Maps in WordPress

    Next, you can add Google Maps to any WordPress post or page. To start, simply edit or add a new page on your website.

    Once you are in the block editor, click the ‘+’ button at the top and add the AIOSEO Local – Map block anywhere on the page.

    How to Add Google Maps in WordPress (The RIGHT Way) (24)

    After that, your Google Map will be added to the page.

    AIOSEO also lets you edit the map settings from the options on your right. For instance, you can show labels and icons, add a custom marker, and edit the map’s width and height.

    How to Add Google Maps in WordPress (The RIGHT Way) (25)

    If you have multiple locations, then you can select which location to highlight by choosing from the options given in the menu on your right.

    Simply click on the ‘Location’ dropdown menu and select your preferred location to display on your website.

    How to Add Google Maps in WordPress (The RIGHT Way) (26)

    Once you are happy with your settings, go ahead and publish the page.

    Now you can visit your website to see Google Maps in action.

    How to Add Google Maps in WordPress (The RIGHT Way) (27)

    You can also add Google Maps to your site’s widget section, like the sidebar or footer.

    To start, head over to Appearance » Widgets from your WordPress admin panel. Next, click the ‘+’ button and add the ‘AIOSEO Local – Map’ widget block where you’d like to display your location.

    How to Add Google Maps in WordPress (The RIGHT Way) (28)

    After that, you can edit the widget settings.

    For example, you could add a title, change the width and height of the map, choose which location to display if you have multiple locations, and edit the label.

    How to Add Google Maps in WordPress (The RIGHT Way) (29)

    That’s it!

    Now when you update your website, you’ll see Google Maps in your widgets area.

    How to Add Google Maps in WordPress (The RIGHT Way) (30)

    Expert Guides on Using Maps in WordPress

    Now that you know how to add Google Maps to your site, you may like to see some other guides related to maps and location in WordPress.

    • How to Embed Bing Maps in WordPress (Step by Step)
    • How to Add an Interactive Map in WordPress
    • How to Embed a Google Map in Contact Forms (With Map Pin)
    • Best Google Maps Plugins for WordPress (Most Are Free)
    • How to Add Google Maps Store Locator in WordPress
    • How to Add Multiple Locations Schema for Local Business in WordPress
    • How to Add Autocomplete for Address Fields in WordPress
    • Best WordPress Geolocation and GeoIP Plugins

    We hope this article helped you learn how to add Google Maps to your WordPress site. You may also want to see our picks for the best WordPress plugins for small businesses and learn how to add a Google Maps store locator in WordPress.

    If you liked this article, then please subscribe to ourYouTube Channelfor WordPress video tutorials. You can also find us onTwitterand Facebook.

    How to Add Google Maps in WordPress (The RIGHT Way) (2024)

    FAQs

    How to Add Google Maps in WordPress (The RIGHT Way)? ›

    Go ahead and navigate to Locations and then click the 'Add New' button. Once you are in the WordPress editor, scroll down to the 'Map' section. Here you can enter your address in the 'Enter a query' field. After entering your location on the map and adding location information, go ahead and click the 'Publish' button.

    How do I add Google direction to WordPress? ›

    Go ahead and navigate to Locations and then click the 'Add New' button. Once you are in the WordPress editor, scroll down to the 'Map' section. Here you can enter your address in the 'Enter a query' field. After entering your location on the map and adding location information, go ahead and click the 'Publish' button.

    How do I make Google Maps right side up? ›

    Use Your Mouse To Rotate Google Maps on PC

    You can rotate the map in any direction of your choice. Alternatively, you can use the compass icon in the top left corner of the map to rotate it. All you need to do is click the North icon and then drag the map in the direction you want to rotate.

    How do I change Google Maps in WordPress? ›

    Here are the steps you have to follow to:
    1. Go to Google My Maps and create a map.
    2. Make your map public.
    3. Generate an embed code for your map.
    4. Add your Google Map API key to the embed code.
    5. Add the embed code to the Text tab on your WordPress page editor.
    6. Preview the map and save your page.
    Aug 1, 2022

    How do I make a Google map responsive in WordPress? ›

    Using Plugins to Add Responsive Google Maps
    1. Go to WordPress, go to Plugins, click on Add New.
    2. Look for Google Maps, and select the plugin.
    3. Enable it with plugins, go to Settings.
    4. Where you want to add the map, you can add the plugin.

    How do I embed a Google map in direction? ›

    Share a map or location with others
    1. On your computer, open Google Maps.
    2. Go to the part of the map that you want to share.
    3. At the top left, click Menu .
    4. Click Share or embed map.
    5. Select any of these options: To share a link through email or text: Click Send a link. Copy link.

    How do I add Google directions to my website? ›

    How to embed a Google Map into a web page
    1. Go to Google maps. ...
    2. When the map appears, click on the Share icon.
    3. Select the Embed tab on the Share window.
    4. Click on Copy HTML.
    5. Open the web page (in WordPress) where you want to embed the map. ...
    6. <iframe src=”https://www.google.com/maps/embed?

    How do I change the navigation style in WordPress? ›

    Select the Navigation block in the List View. View the Navigation block settings on the right side of the screen. From here, you can control many aspects of the menu's appearance, including: The text and background color of the menu and its individual links.

    How do I customize my Google map route? ›

    How to change a route on Google Maps, with comprehensive customization
    1. Open your Google Maps app on your mobile device.
    2. Tap the 'Directions' button.
    3. Enter your existing address or the address you'll be starting your journey from.
    4. On the left of the screen, click the 'Add' button to add stops along the way.
    Jun 15, 2023

    How do I change navigation in WordPress? ›

    How to change my website's menu navigation in WordPress
    1. To create or edit a navigation menu on your site, go to Appearance > Customize.
    2. This will open the customizer. ...
    3. To create a new menu, click on Add a Menu.
    4. And then type a name for your new menu (this can be anything but should reflect the menus used or location).
    Jul 23, 2021

    Why is Google Maps not working in WordPress? ›

    Make sure you register the Google Maps API with your URL, or else you would still have the Google Maps Not Working error. We must associate the URL with our new Google Maps API. After a few seconds, you'll get a “You're all set!” window with your API key.

    How do I make my navigation menu responsive in WordPress? ›

    1. Login to your WordPress admin area.
    2. Search for Responsive Menu.
    3. Click install Responsive Menu.
    4. Activate through the Plugins menu in WordPress or when asked during installation.
    5. Set your options from the Responsive Menu admin area.

    How to make a Google Map responsive? ›

    To make a responsive Google Map in HTML, take your existing embed code and place it in your HTML document. Then, wrap the <iframe> element (which represents the map) in a container <div> with the class google-map. Here's the result. The map will scale proportionally to the size of your browser.

    How do I create an interactive map in WordPress? ›

    To add an interactive map, simply find the Google Maps block in the left-hand menu and drag it onto your layout. The Google Maps block will show a default location, but you'll typically want to change this. Simply click to select the Google Maps block and then click on the small gear icon that appears in the toolbar.

    How do I add responsiveness to WordPress? ›

    A responsive WordPress theme is one that has been designed to automatically adjust to the device it is being viewed on. There are many free and premium responsive themes available for WordPress. To find a theme, go to the Appearance > Themes section of your WordPress dashboard and click on the “Add New” button.

    How do I make a responsive slider in WordPress? ›

    To create a responsive carousel slider in WordPress, you'll need to follow these 5 steps:
    1. Install and activate Soliloquy plugin.
    2. Install and activate Carousel addon.
    3. Create an image slider on your website.
    4. Enable the slider carousel settings.
    5. Publish and display the image slider.
    Jan 18, 2018

    Top Articles
    Latest Posts
    Article information

    Author: Merrill Bechtelar CPA

    Last Updated:

    Views: 5809

    Rating: 5 / 5 (50 voted)

    Reviews: 81% of readers found this page helpful

    Author information

    Name: Merrill Bechtelar CPA

    Birthday: 1996-05-19

    Address: Apt. 114 873 White Lodge, Libbyfurt, CA 93006

    Phone: +5983010455207

    Job: Legacy Representative

    Hobby: Blacksmithing, Urban exploration, Sudoku, Slacklining, Creative writing, Community, Letterboxing

    Introduction: My name is Merrill Bechtelar CPA, I am a clean, agreeable, glorious, magnificent, witty, enchanting, comfortable person who loves writing and wants to share my knowledge and understanding with you.