Google Map Module

Create Beautiful Looking Interactive Google Maps in Divi with Supreme Maps. With Pro Version, you get more features and more ways to showcase Google Maps.

📥 Google Map Module Usage

🧸 Content Options

Adding Marker Items

Click on + Add new Item to add your first Marker on the Map. Clicking + Add new Item will open a completely new list of design settings (including Content, Design, Advanced) for your new Map Marker.

See Below for Individual Marker Item Settings ↓

After you add your first Marker, you will see a gray bar appear with the title of your Icon List shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the Icon List.

Map

There is where you'll be able to set the location for your Map. If you've added Google Map API, you can simply enter the place name and click on the Find button and It will automatically locate the address.

Settings

Control Tab

Gesture Handling

When a user scrolls a page that contains a map, the scrolling action can unintentionally cause the map to zoom. This behavior can be controlled using the gesture Handling map option.

Map Types

Choose what type of Map you'd like to show. You can choose from Roadmap, Satellite, Hybrid or Terrain.

Disable Default UI

This will remove all the Controls on the Map.

Use Zoom Control

The Zoom control displays "+" and "-" buttons for changing the zoom level of the map. You can hide it If you want from here.

Use Map Type Control

The Map Type control is available in a dropdown or horizontal button bar style, allowing the user to choose a map type (ROADMAP, SATELLITE, HYBRID, or TERRAIN). This control appears by default in the top left corner of the map.

You can disable it If you don't want to show it.

Map Type Control Style

Here you can change the style of Map Type Control. You can set it to either Horizontal Bar or Dropdown Menu.

Use Scale Control

The Scale control displays a map scale element. This control is disabled by default. If you want to show it simply enable the option.

Use Street View Control

The Street View control contains a Pegman icon that can be dragged onto the map to enable Street View. This control appears by default near the bottom right of the map. You can also disable It If you don't want to show it.

Use Rotate Control

The Rotate control provides a combination of tilt and rotate options for maps containing oblique imagery. This control appears by default near the bottom right of the map. See 45° imagery for more information. Choose If you want to show it or hide it.

Use Fullscreen Control

The Fullscreen control offers the option to open the map in fullscreen mode. This control is enabled by default on desktop and mobile devices. Note: iOS does not support the fullscreen feature. The fullscreen control is therefore not visible on iOS devices.

Position Tab

This is where you'll be able to change the position of different elements on the Map. For example, you can show the Zoom Controls on the bottom left corner or where It looks good to you. And the same goes for other elements, you can change their position.

Styles Tab

Preset Map Styles

This is where you'll be able to choose Map Style from 6 Different styles.

Using Custom Map Style

The Custom Map Style is a Premium feature and you'll need the Pro version. You can go to this website and choose any style for your Map: https://snazzymaps.com/explore

Then open the Style & Copy the Code.

Once you've copied the code, go to this website and minify the Code and then copy the minified code: https://codebeautify.org/jsonminifier

That's It, now copy the minified code and paste it to the Custom Map Style Box in Module Settings. And that's how you can use a custom style for your Google Map.

Marker Settings

Pan to Marker

InfoWindow will be panned into view when opened. (Depending on Trigger Method).

Marker Animation.

Here you can choose any animation for your Marker. When you click the Marker the Info will show with stunning animation.

InfoWindow Trigger Method

Here you'll be able to choose how to trigger the InfoWindow. You can either select the Hover or Click trigger method.

InfoWindow Settings

Open InfoWindow on Page Load

This will open all the InfoWindows on page load.

Close Other Window

InfoWindow will close when any other InfoWindow is opened (Depending on Trigger Method).

Close InfoWindow on Map Click

Close all info window will close when the map is clicked.

InfoWindow Max Width

Change the Max Width of InfoWindow from here.

Marker Clusterer Settings

Use Marker Clusterer

Create and manage per-zoom-level clusters for large amounts of markers.

🎨 Design Options

In the Design options, you'll be able to make different stylings to the Module, Popup and Popup content, etc.

InfoWindow

Title

Here you'll be able to style the Popup Title just like any text you style in Divi.

Content

This is where you'll be able to style the Popup Content/Description the way you like.

Close

Here you'll be able to style the Close button. You can change color, size and more.

Styles

In the Styles tab, you'll be able to style the InfoWindow's background color, Padding, Border, Box Shadow and more. You can style the InfoWindow the way you like. There are no limitations.

Map

Here you can add filters to your Map. Simply choose the way you want to apply a filter to the Map.

Sizing

This is where you'll be able to change the Map Width and Height to where it looks good to you.

And else, you can play around with adding Border, Border Radius & Box Shadow to the Map.

🔗 Advanced Options

Use the advanced options to give your Google module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

📌 Leaflet Pin/Item Settings

Text

This is where you'll be able to add your content for Popup that shows on Marker click. You can add Title and Description.

Map

You need to add the exact address of your location so that the Marker can point out the user where It's exactly on the map.

Marker Settings

Use Custom Marker Icon/Image

Enable this option, If you'd like to use a custom Marker Icon/Image for your Marker. Once enabled, you'll be asked to add your custom Image for Marker from the Media Library.

Marker Type

You can change the type of Marker. You can select "Upload" option to upload your custom Icon or select the "Divi Icons" to select an Icon from Divi Icon Library.

Use Popup

Enable this option, If you'd like to trigger a Popup on Marker click.

--Popup Type

Select the Type of Popup from here. It can be:

• Layout - Choose a Layout from Divi Library.

• iFrame - Open a website in Popup with iFrame.

• Image - Open an Image in Popup.

• Video - Play a Video in Popup.