Skyland Creative:  

Show your location. Let visitors get there.

  • Display a Google Map using a simple address
  • Let visitors enter their location
  • Open instant driving directions in Google Maps
  • Works directly inside the Divi Builder
  • No coordinates, no complicated setup

👇 Download the plugin

Download

Why I Created This Plugin

The default map module in Divi does the bare minimum. It shows a location, but it doesn’t really help the user take the next step.

When someone visits a site, they don’t just want to see where you are. They want to understand where they are in relation to you, and how to get there quickly.

I built this plugin to solve that.

Instead of just dropping a pin on a map, this adds a simple, practical tool. Visitors can enter their starting point and immediately get driving directions. No friction, no confusion.

It keeps the setup simple for the person building the site, and makes the map actually useful for the person visiting it.

Sometimes the fastest way through WordPress is just one key away.

Core Features

  • Divi Builder module for displaying a Google map from an address.
  • Central plugin settings page for the Google Maps API key.
  • Clean address-based map setup instead of manual coordinate entry.
  • Stable Divi builder preview.
  • Interactive front-end Google Map.
  • Configurable zoom level.
  • Optional mouse wheel scrolling control.
  • Optional touch interaction control.
  • Centered front-end directions box with modern styling.
  • Google Maps autocomplete suggestions for the Starting point field.
  • One-click Get Directions action that opens Google Maps driving directions in a new tab.
  • Search box position controls inside the Divi module.
  • Horizontal and vertical pixel offset controls for precise overlay placement.

How It Works

  • Add your Google Maps API key in the plugin settings.
  • Add the module to a Divi layout.
  • Enter the destination address in the module settings.
  • Configure optional map behavior such as zoom, touch, and mouse wheel interaction.
  • Choose where the front-end search box should appear on the map.
  • Adjust horizontal and vertical edge offsets in pixels if needed.
  • On the front end, visitors can enter their own starting point and open Google Maps driving directions to the mapped destination.

Who This Plugin Is For

  • Google Map Directions for Divi is useful for:

    • Local businesses that want simple directions to an office, store, or venue.
    • Service businesses that want a clean map section on contact pages.
    • Divi designers who want a lighter and more controlled map experience.
    • website owners who want customer-friendly directions without a complicated setup.

What Makes It Different

  • Many map plugins try to do everything at once. This plugin takes a different approach. It focuses on one polished workflow and grows carefully from there.

    Key differences include:

    • Simpler address-first setup.
    • A cleaner Divi-focused editing experience.
    • Practical customer-facing direction tools.
    • Incremental development with stability as a priority.

Installation

1. Install the Plugin

  • Log into your WordPress dashboard
  • Navigate to Plugins → Add New
  • Search for Google Map Directions for Divi (or upload the plugin ZIP if installing manually)
  • Click Install Now, then Activate

2. Add Your Google Maps API Key

  • Go to Settings → Google Map Directions for Divi
  • Paste your Google Maps API key into the provided field
  • Save your settings

Note: Make sure your API key has Maps JavaScript API and Places API enabled for full functionality.

3. Add the Module in Divi

  • Open any page using the Divi Builder
  • Add the Google Map Directions module
  • Enter your destination address (this is the location users will get directions to)

4. Configure Map Settings (Optional)

Customize the experience to fit your needs:

  • Set the zoom level
  • Enable or disable mouse wheel zoom
  • Enable or disable touch interaction
  • Adjust the search box position
  • Fine-tune placement using horizontal and vertical offsets

5. Save and Publish

  • Save your page
  • View it on the front end

Visitors can now:

    • Enter their starting location
    • Use autocomplete to find their address
    • Click Get Directions to open Google Maps with driving directions instantly

Changelog

0.5.12

  • Updated plugin documentation to reflect the latest module features.

0.5.11

  • Added search box position options and edge offset controls.

0.5.7

  • Renamed the plugin display name to Google Map Directions for Divi.

0.5.6

  • Added WordPress and PHP requirement metadata.

0.5.5

  • Added author attribution and settings-page credit text.

0.5.4

  • Added Google Places autocomplete to the front-end starting point field.

0.5.3

  • Updated directions to use the module address as the destination.

0.5.2

  • Simplified directions submission with direct Google Maps form behavior.

0.5.1

  • Improved directions button handling and fallback navigation.

0.5.0

  • Introduced interactive front-end map support and map interaction controls.

0.1.0

    • Initial plugin foundation and Divi integration.