Home » WordPress Plugins » Local SEO For Divi & Gutenberg Blocks » How To Add A Business Location On Google Maps In Divi (WordPress) – Local SEO

How To Add A Business Location On Google Maps In Divi (WordPress) - Local SEO

Do you own a local business?

Help customers locate your business location
Provide driving directions
Add credibility to your organization
Improve customer experience
Reduce bounce rates

We’ve got you covered!

With our easy-to-use Location Map Divi Module, add a business location map on your website.

Pre-requisites

WordPress Website
Divi Theme by Elegant Themes
Local SEO For Divi & Gutenberg Blocks plugin

Tools

Computer

Estimated Cost : 49

Total Duration : 9 minutes

Start your FREE trial. No credit cards required.

Step 1 - Setup Local SEO Settings

Ensure you've configured Local SEO essential for store locator to work.
- Local SEO settings available at WordPress Admin > Settings > Locations & SEO
- Ignore this setup, if you've done this before.
- For details visit Local SEO Configuration

Start your FREE trial. No credit cards required.

Step 2 - Add Location Data To The WordPress Website

Ensure your business locations are setup on your website.

Ignore this step, if you're business location data is setup
- A business location entry will contain fields relevant to your Local SEO.
- Ensure you fill in most data fields.
- For details visit Add Business Locations In WordPress

Start your FREE trial. No credit cards required.

Step 3 - Insert "Location Map" Divi Module On Visual Builder

You are ready to add store locator to a page.
- Edit a page in Divi Visual Builder
- With a divi row, click on + sign with label Add New Module
- A popupover listing of module list shows up.
- In the search box, type "Location Map" & select the Location Map module
- That's it, you have the store locator divi module on the page.

Start your FREE trial. No credit cards required.

Step 4 - Map (Content Tab) - Divi Location Map Setting

In this section, select location post item & setup map options

Settings are
- Use Current Location
  - Toggle ON/OFF switch
  - When ON, we use current post for location data
  - When OFF, select a location from the Select Location Post dropdown below.
- Select Location Post - A dropdown field to select a location.
- Map Type - Select a map type.
  - Hybrid ➔ This map type displays a transparent layer of major streets on satellite images.
  - Roadmap ➔ This map type displays a normal street map.
  - Satellite ➔ This map type displays satellite images.
  - Terrain ➔ This map type displays maps with physical features such as terrain and vegetation.
- Gesture Handling - Controls how the map handles gestures.
  - Auto ➔ Gesture handling is cooperative or greedy, depending on whether the page is scrollable or in an iframe.
  - Co-operative
    - Scroll events and one-finger touch gestures scroll the page, and do not zoom or pan the map.
    - Two-finger touch gestures pan and zoom the map.
    - Scroll events with a ctrl key or ⌘ key pressed zoom the map.
    - In this mode the map cooperates with the page.
  - Greedy ➔ All touch gestures and scroll events pan or zoom the map.
  - None ➔ The map can't panned or zoomed by user gestures.
- Marker Icon - Upload an image as custom marker icon. Recommended image size is 100px x 100px

Start your FREE trial. No credit cards required.

Step 5 - Map Controls (Content Tab) - Divi Location Map Setting

Setup the controls for map

Settings are
- Show Map Type Control - A toggle to show/hide map type control
  - Map Types Following are the map types
    - Hybrid
    - Roadmap
    - Satellite
    - Terrain
  - Map Control Position
    - Set the position of the map control.
    - Options are combination of top, bottom, center with right, left
- Show Zoom Control - A toggle to show/hide zoom control
  - Zoom Control Position
    - Set the position of the zoom control.
    - Options are combination of top, bottom, center with right, left
- Show Scale Control - A toggle to show/hide scale control.
- Show Street View Control - A toggle to show/hide street view control
  - Street View Control Position
    - Set the position of the street view control.
    - Options are combination of top, bottom, center with right, left
- Show Rotate Control - A toggle to show/hide rotate control
  - Rotate Control Position
    - Set the position of the rotate control.
    - Options are combination of top, bottom, center with right, left
- Show Fullscreen Control - A toggle to show/hide fullscreen control
  - Fullscreen Control Position
    - Set the position of the fullscreen control.
    - Options are combination of top, bottom, center with right, left

Start your FREE trial. No credit cards required.

Step 6 - Info Window (Content Tab) - Divi Location Map Setting

This section setups the data to show on location listing & map info window.

Options are
- Show Info Window - A toggle to show/hide info window.
- Show Title - A toggle to show/hide title on listing & info window
- Show Address - A toggle to show/hide address on listing & info window
- Show Description - A toggle to show/hide description on listing & info window
- Show Direction Link - A toggle to show/hide direction link on listing & info window

Start your FREE trial. No credit cards required.

Step 7 - Map (Design Tab) - Divi Location Map Setting

Represents design options for the map
- Height - Set the height in pixels for the map.
- Map Styles
  - Customize google map style
  - Goto https://mapstyle.withgoogle.com/
  - On page load, a popover show up.
  - Select No thanks, take me to the old style wizard
  - Setup custom google map styles.
  - Click on FINISH button.
  - A popover with JSON style shows up.
  - Copy and paste the JSON into your app or website code.

Start your FREE trial. No credit cards required.

Step 8 - Marker (Design Tab) - Divi Location Map Setting

Represents design options for location map marker

Design options are
- Animation
  - Animation for the map marker
    - None - No animation
    - Drop - A drop animation
    - Bounce - A bounce animation

Start your FREE trial. No credit cards required.

Step 9 - Info Window Title (Design Tab) - Divi Location Map Setting

Represents the info window title text

Design options are
- Font settings and styles

Start your FREE trial. No credit cards required.

Step 10 - Info Window Description (Design Tab) - Divi Location Map Setting

Represents the info window description text

Design options are
- Font settings and styles

Start your FREE trial. No credit cards required.

Step 11 - Info Window Address (Design Tab) - Divi Location Map Setting

Represents the info window address text

Design options are
- Font settings and styles

Start your FREE trial. No credit cards required.

Step 12 - Custom CSS (Advanced Tab) - Divi Location Map Setting

- Gain fine-grained control over UI elements of the location map.
- Add custom css for those elements
- Tons of element options provided

Start your FREE trial. No credit cards required.