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.
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.
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.
Control Tab
Position Tab
Styles Tab
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.
Choose what type of Map you'd like to show. You can choose from Roadmap, Satellite, Hybrid or Terrain.
This will remove all the Controls on the Map.
The Zoom control displays "+" and "-" buttons for changing the zoom level of the map. You can hide it If you want from here.
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.
Here you can change the style of Map Type Control. You can set it to either Horizontal Bar or Dropdown Menu.
The Scale control displays a map scale element. This control is disabled by default. If you want to show it simply enable the option.
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.
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.
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.
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.
This is where you'll be able to choose Map Style from 6 Different styles.
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.
InfoWindow will be panned into view when opened. (Depending on Trigger Method).
Here you can choose any animation for your Marker. When you click the Marker the Info will show with stunning animation.
Here you'll be able to choose how to trigger the InfoWindow. You can either select the Hover or Click trigger method.
This will open all the InfoWindows on page load.
InfoWindow will close when any other InfoWindow is opened (Depending on Trigger Method).
Close all info window will close when the map is clicked.
Change the Max Width of InfoWindow from here.
Create and manage per-zoom-level clusters for large amounts of markers.
In the Design options, you'll be able to make different stylings to the Module, Popup and Popup content, etc.
Title
Content
Close
Styles
Here you'll be able to style the Popup Title just like any text you style in Divi.
This is where you'll be able to style the Popup Content/Description the way you like.
Here you'll be able to style the Close button. You can change color, size and more.
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.
Here you can add filters to your Map. Simply choose the way you want to apply a filter to the Map.
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.
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.
This is where you'll be able to add your content for Popup that shows on Marker click. You can add Title and Description.
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.
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.
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.
Enable this option, If you'd like to trigger a Popup on Marker click.
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.
Last modified 1yr ago