How to Add Google Maps in WordPress

The world has shrunk, thanks to the internet and powerful tools like Google Maps. For businesses and individuals, integrating Google Maps into their WordPress websites has become a crucial way to enhance user experience, provide clear directions, and showcase locations. In this article, you learn how to add Google Maps in WordPress, from obtaining your API key to embedding interactive maps.

Before getting into the integration process, it's important to understand the Google Maps Platform. Google offers a suite of APIs (Application Programming Interfaces) that allow developers to integrate Google Maps functionalities into their applications and websites. These APIs are categorized into:

• Maps SDK for Android/iOS: For native mobile applications.

• Maps JavaScript API: For web applications, which is what we'll be focusing on for WordPress.

• Places API: To search for places, retrieve details, and add new places.

• Geocoding API: To convert addresses into geographic coordinates and vice versa.

• Directions API (Legacy): To calculate directions between locations.

• Distance Matrix API: To calculate travel times and distances between multiple origins and destinations.

Most of these APIs require an API key for authentication and usage tracking. While many of Google Maps' core features were once free, Google introduced a new pricing model in 2018, requiring users to enable billing for most of its APIs. However, Google provides a generous free tier, which is sufficient for most small to medium-sized websites. You'll typically get $200 worth of free usage each month.

The first and most important step is to obtain your Google Maps API key. This key authenticates your requests to Google's servers and allows you to use their services.

1. Create a Google Account
2. Navigate to the Google Cloud Platform Console
3. Create a New Project
4. Enable Billing for Your Project
5. Enable Necessary APIs
6. Create Your API Key
7. Restrict Your API Key

Create a Google Account (if you don't have one)

If you already have a Google account, you can skip this step. Otherwise, navigate to accounts.google.com/signup and follow the prompts to create a new account. This account will be linked to your Google Cloud Platform project.

1. Navigate to the Google Cloud Platform Console

2. Go to the Google Cloud Platform Console. You'll be prompted to log in with your Google account.

Create a New Project

Upon logging in, you might see an existing project or a prompt to create one. If you're new to Google Cloud, it's best to create a new project dedicated to your WordPress website.

1. Click on the "Select a project" dropdown at the top of the page.

2. Click on "New Project."

3. Enter a Project name (example: "My WordPress Maps").

4. Choose a Billing account (we'll set this up in the next step). If you don't have one, it will prompt you to create one.

5. Click "Create."

Enable Billing for Your Project

Even with the free tier, Google requires you to enable billing. This is a common point of confusion, but remember, you won't be charged unless your usage exceeds the free limits.

1. In the Google Cloud Console, navigate to the Navigation Menu (☰) on the left.

2. Under "Billing," click on "Billing."

3. If you don't have a billing account, click "Create billing account."

4. Follow the instructions to add your payment information. This typically involves providing credit card details.

5. Once a billing account is set up, ensure it's linked to your project. If not, click on "Link a billing account" and select your newly created billing account.

Enable Necessary APIs

To display maps, you'll need to enable specific APIs. For most basic map integrations, you'll primarily need the Maps JavaScript API. Depending on your advanced features, you might also need others.

1. In the Google Cloud Console, go to the Navigation Menu (☰).

1. Under "APIs & Services," click on "Library."

1. In the search bar, type "Maps JavaScript API" and select it from the results.

1. Click the "Enable" button.

Repeat this process for other APIs if you plan to use them (example - Geocoding API, Places API, Directions API). For example, if you want to allow users to search for locations, you'll need the Places API.

Create Your API Key

Now that billing is enabled and the necessary APIs are active, you can generate your API key.

1. In the Google Cloud Console, go to the Navigation Menu (☰).

2. Under "APIs & Services," click on "Credentials."

3. Click on "+ CREATE CREDENTIALS" and select "API key."

1. A pop-up will display your newly generated API key. Copy this key immediately. You'll need it for your WordPress site.

Restrict Your API Key (Important Security Step!)

Never use an unrestricted API key in a production environment. An unrestricted key can be exploited, leading to unauthorized usage and potentially significant charges to your billing account.

1. In the "Credentials" page, click on the pencil icon (Edit API key) next to your newly created API key.

2. Under "Application restrictions," select "HTTP referrers (web sites)."

3. In the "Website restrictions" section, click "+ ADD AN ITEM."

4. In the "Referrer" field, enter your website's domain in the following formats:

   a. .yourdomain.com/ (This allows all subdomains and paths for your domain)

   b. yourdomain.com/* (If you only want to allow your main domain)

   c. * (Only use this for development/testing, never for production)

   d. Example: If your website is www.example.com, you might add .example.com/ and example.com/*.

5. Under "API restrictions," select "Restrict key."

6. In the dropdown, select the APIs you enabled earlier (example: Maps JavaScript API, Geocoding API). This ensures your key can only be used for the specified services.

7. Click "Save."

Now you have a secured Google Maps API key, ready to be added into your WordPress website!

There are several ways to add Google Maps to your WordPress site. The most common and recommended methods involve using a plugin or embedding directly with HTML/JavaScript.

Method 1: Using a WordPress Plugin (Recommended for Most Users)

Using a plugin is by far the easiest way to add Google Maps to your WordPress site, especially if you're not comfortable with code. There are numerous excellent WordPress Map plugins available, both free and premium. Here, we'll focus on a popular and versatile free option: WP Go Maps.

1. Install and Activate the Plugin
2. Configure the Plugin and Enter Your API Key
3. Create Your First Map
4. Embed the Map in Your Posts, Pages, or Widgets

Step 1: Install and Activate the Plugin

1. Log in to your WordPress admin dashboard.
2. Go to "Plugins" > "Add New."
3. In the search bar, type "WP Go Maps."
4. Find the "WP Go Maps" plugin and click "Install Now."
5. Once installed, click "Activate."

Step 2: Configure the Plugin and Enter Your API Key

1. After activation, a new menu item, usually named "WP Google Maps" or "Maps," will appear in your WordPress dashboard. Click on it.

2. The plugin will likely prompt you to enter your Google Maps API Key. Paste the key you generated earlier into the designated field.

3. Click "Save API Key" or a similar button.

Step 3: Create Your First Map

1. In the plugin's settings, look for an option like "Maps" > "Add New Map" or "Create Your First Map."

2. Give your map a Name (example: "Our Location").

a. You'll typically see options to:

I. Set the map's center: You can drag the map, search for an address, or enter latitude and longitude coordinates.
II. Set the zoom level: Determine how close or far the map initially appears.
III. Choose the map type: Roadmap, Satellite, Terrain, Hybrid.
IV. Set map dimensions: Width and Height in pixels or percentage.
V. Add markers: This is where you pinpoint specific locations. Click "Add New Marker," enter an address or coordinates, provide a title, and optionally add a description or an icon.
VI. Add shapes or layers: Some plugins allow you to draw polygons, polylines, or add traffic layers.
VII. Choose a map theme/style: Many plugins offer pre-defined map styles to match your website's design.

Step 4: Embed the Map in Your Posts, Pages, or Widgets

Once you've configured your map, the plugin will provide a shortcode.

For posts/pages:

1. Edit the post or page where you want to display the map.

2. In the WordPress editor (Gutenberg or Classic), paste the shortcode into a Shortcode block or directly into the text editor. The shortcode will look something like [wpgmza id="1"].

3. Update or publish your post/page.

For widgets:

1. Go to "Appearance" > "Widgets."

2. Find the "WP Google Maps" widget (or a generic "Text" widget).

3. Drag and drop it into your desired sidebar or footer area.

4. Select the map you want to display from the widget's options or paste the shortcode.

5. Save the widget.

Method 2: Embedding Google Maps Directly (Without a Plugin)

If you prefer to avoid plugins or need more control over the map's behavior and styling, you can embed Google Maps directly using HTML and JavaScript. This method requires a basic understanding of web development.

Whether you use a plugin or custom code, Google Maps offers extensive customization options.

With Plugins:

Most Google Maps plugins provide intuitive interfaces to customize:

Map Styles: Change colors, hide certain features (landmarks, roads, transit lines) to match your brand. Many plugins offer pre-defined styles or allow you to import styles from tools like Snazzy Maps.

• Marker Icons: Use custom images for your location markers instead of the default red pin.

• Info Windows: Customize the content that appears when a user clicks on a marker.

• Controls: Show/hide zoom controls, street view controls, full-screen buttons.

• Polygons & Polylines: Draw custom shapes or lines on the map.

With Custom Code (Maps JavaScript API):

You have even more granular control with custom code:

Styling the Map

1. You can define an array of JSON objects to style your map.

2. Find pre-made styles on Snazzy Maps or create your own using the Google Maps Platform Styling Wizard.

3. Add the styles property to your Map constructor:

const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: mountVernon,
    mapTypeId: 'roadmap',
    styles: [
        // Your JSON style array goes here
        {
            "featureType": "poi",
            "stylers": [
                { "visibility": "off" }
            ]
        },
        {
            "featureType": "road",
            "elementType": "geometry.fill",
            "stylers": [
                { "color": "#ffcccc" }
            ]
        }
    ]
});

Custom Marker Icons

Replace the default marker with your own image.

new google.maps.Marker({
    position: mountVernon,
    map: map,
    title: "Mount Vernon, Illinois",
    icon: {
        url: 'https://yourwebsite.com/wp-content/uploads/custom-marker.png', // URL to your custom icon
        scaledSize: new google.maps.Size(32, 32) // Size of the icon
    }
});

Info Windows

Display information when a marker is clicked.

const marker = new google.maps.Marker({
    position: mountVernon,
    map: map,
    title: "Our Office"
});

const infoWindow = new google.maps.InfoWindow({
    content: '<h3>Our Headquarters</h3><p>123 Main Street, Mount Vernon, IL</p><p><a href="https://example.com">Visit Us</a></p>'
});

marker.addListener('click', () => {
    infoWindow.open(map, marker);
});

Adding Multiple Markers

Loop through an array of locations to add multiple markers.

const locations = [
    { lat: 38.318353, lng: -88.903737, title: "Location A", description: "First Office" },
    { lat: 38.325000, lng: -88.910000, title: "Location B", description: "Second Branch" }
];

locations.forEach(loc => {
    const marker = new google.maps.Marker({
        position: { lat: loc.lat, lng: loc.lng },
        map: map,
        title: loc.title
    });

    const infoWindow = new google.maps.InfoWindow({
        content: `<h3>${loc.title}</h3><p>${loc.description}</p>`
    });

    marker.addListener('click', () => {
        infoWindow.open(map, marker);
    });
});

Things happen. If you used this tutorial and had some issues, here are some leads to troubleshooting Google Maps from showing up properly in WordPress:

1. Map Not Displaying

2. "This page didn't load Google Maps correctly. See the JavaScript console for technical details." Error

3. Map Loads, but Markers Don't Appear

4. Slow Loading Map

Map Not Displaying

• Check your API Key: Is it correct? Is it restricted properly?

• Billing Enabled: Have you enabled billing for your Google Cloud Project?

• API Enabled: Is the Maps JavaScript API enabled for your project?

• Console Errors: Open your browser's developer console (F12) and check for JavaScript errors related to Google Maps.

• Container Dimensions: Does your map div have a defined width and height?

• Correct Callback: If using custom code, is callback=initMap (or your function name) correctly specified in the API script URL?

• Plugin Settings: If using a plugin, double-check all its settings and ensure the shortcode is correctly placed.

"This page didn't load Google Maps correctly. See the JavaScript console for technical details." Error

This almost always indicates an issue with your API key or billing. Revisit the Google Cloud Platform Console, ensure billing is active, the correct APIs are enabled, and your API key restrictions are correctly set to allow your website's domain.

Map Loads, but Markers Don't Appear

• Correct Coordinates: Are the latitude and longitude coordinates for your markers accurate?

• Marker map Property: Is map: map correctly set in your google.maps.Marker constructor, pointing to your initialized map object?

Slow Loading Map

• Too Many Markers: If you have hundreds or thousands of markers, consider using marker clustering or optimizing your data loading.

• Excessive API Calls: Monitor your API usage in the Google Cloud Console.

Adding Google Maps in WordPress is a powerful way to enhance user engagement, provide clear location information, and professionalize your online presence. Whether you choose the simplicity of a plugin or the flexibility of custom code, the process is straightforward once you understand the steps involved in obtaining and securing your Google Maps API key. By following this tutorial, you can confidently add interactive maps into your WordPress site, helping your visitors navigate directly to your doorstep.