Google map

Show the multiple locations on one map. Google map with custom styles is easy to add and to use. Let your visitors know where they can find you.
Read documentation
Usage frequency
Preset amount

Available options

Default code: [dfd_google_map x_pan="0" y_pan="0"]

Map style – Choose between 20 preset styles;

Animation – Select among 14 appear effects;

Custom CSS Class – Type your own unique class name for the item – this is a useful option for those who want to create a specific style.
For example, you can type custom-style class and then go to Theme options -> General Options -> Custom CSS / JS -> Custom CSS and write your own CSS code with this class to get your own style;

Locations – Choose the marker style, add the title and some info. You can also specify the tooltip visibility for “Marker thumbnail” style;

Custom image marker – Upload the image which will be used as marker on your map;

Hover background image – Upload the image which will be visible when you hover over the marker;

Auto pan – Adjusts map scale automatically to show all locations;

Touch on mobile devices –  Allows you to navigate the map on touch devices. You can also disable this option to make the map fixed;

Zoom in/out – This option allows you to enable or disable zoom for the map;

Map height – Specify the height of your map;

Offset for the center of the map – This option allows you to add the offset to center the map when needed;

Typography – Select letter spacing, font size and element tag. You can also choose the custom font family.

Default styles

Samples of preset styles without custom changes
marker thumbnail style
info window style

Customized styles

Some variations of style customizations of the shortcode
RNK2 style
Blue water style
Gowalla style
Become a dinosaur style
Avocado world style
Nature style