Google Maps JavaScript API in Bricks

This Pro tutorial provides the steps to show post-specific maps with custom marker content in Bricks using Google's Maps JavaScript API and Advanced Custom Fields.

We are going to

• use ACF's "Google Map" type of field for being able to specify the address/location for each post.
• use a "Wysiwyg Editor" custom field for setting custom marker content for each post's location. This will be shown in the info window that appears when any marker is clicked.
• show the name and address if marker content is empty.
• optionally set custom marker image.

While it is possible to use the built-in Map element, using the Google's Maps API directly gives us more control for customization incl. being able to set the initial zoom of each post's map with no maximum allowed zoom level unlike the Map element in Bricks 1.5.

Step 1

Paste your Google Maps API key at Bricks → Settings → API Keys.

This is needed to have the map showing the entered location when populating the Google Map field in the post editor.

Step 2

Create a field group having a location and marker_content fields and attach it to your desired post type.

The initial zoom level can be changed here if desired from the default value of 14. This can be set/changed anytime for each post's map by clicking the + and - buttons.

Step 3

Add/edit your posts and for each, enter the address for the Location.

Zoom in/out as needed.

If Marker Content is left empty, we will show the Name and Address from the entered Location automatically in the marker's info window (popup).

Step 4

Edit the child theme's functions.php.

If you've already added other custom code in this file especially in the function hooked to wp_enqueue_scripts action, take a backup/copy the code and re-add it after this step.

Replace

/**
 * Register/enqueue custom scripts and styles
 */
add_action( 'wp_enqueue_scripts', function() {
	// Enqueue your files on the canvas & frontend, not the builder panel. Otherwise custom CSS might affect builder)
	if ( ! bricks_is_builder_main() ) {
		wp_enqueue_style( 'bricks-child', get_stylesheet_uri(), ['bricks-frontend'], filemtime( get_stylesheet_directory() . '/style.css' ) );
	}
} );

with