Advanced Google Map

The Advanced Google Map uses Google Maps JavaScript API, make sure to check their usage on the costs:


To note first that Advanced Google Maps does not add markers in Breadkance in live view, but once they are added you can view it on the front end, or by refreshing Breakdance Builder.

If the map does not load inside the breakdance builder after the refresh, you will need to double-click on the Markers Data button, for example, if you are using Meta Box, click twice on it, and it will initialize.

Setting up the Map

You can use the development map in the development area, but for the live website you will need to have Google Maps JavaScript API, all details could be found at that link to register and activate a new API for your Google Maps.
Once you have the API, you will need to include inside Destiny Elements settings in the WordPress admin dashboard:

Map Settings

You will need to set the centre position with Latitude and Longitude as seen above.

You can also just show markers without a tooltip, you can disable it.

There are 3 ways you can display markers, one is using Default, which will allow to add markers inside breakdance builder. Default also allows to addition of custom icons for the pins where ACF & MetaBox do not, it’s currently a standard red pin.

Default Markers

As seen above, the content is added via Rich Text Element, so anything can be placed there.

You will also require the Lat and Long coordinates to be added.

Additionally a custom icon can be added for each marker.

ACF & MetaBox Markers

Advanced Google Map works best with ACF or MetaBox, in here you will require a custom post type, or you can use existing posts or pages.

As seen above, Post Type is going to be required, and it can be anything, then you will require to add manually the filed names from ACF or MetaBox for it to put the pins on the map.

Below is an example of how ACF Lat & Long fields are set up:

Below is an example of how MetaBox Lat & Long fields are set up:

Then they are added inside Brekance Builder to the map as seen above in the Markers Tab.

Tooltip Options

As seen above there is plenty of customisation that you can display in the Tooltip from that post type.

The excerpt is gotten from the Gutenberg/Classis editor block.

Additional data

Additionally, the map allows adding extra fields, as seen in the above screenshot we have Phone and Address included there.

This is an example added with Dynamic Data from the ACF field in the custom field:

And fields that can be added manually from ACF or MetaBox:

The name or the custom field can be left blank, and those fields are customisable with style in the design.

Additionally, for more advanced users, the extra fields can be customisable with class selectors:

Customising Design

As can be seen above, the map can tooltip can be customised in a lot of ways.

Copyright © 2024. Digital Destiny. All rights reserved.

Supported by Digital Destiny