display ACF google maps field

Hi @biels,

I’ve just added support for the ACF Google Map field in the PRO version. It’s now available in the beta release 1.4.6-beta.0.

Here are a few notes about the Google Map field.

API Key
By default, MFB retrieves the API key from acf_get_setting( 'google_api_key' ). If you add the key using acf_update_setting( 'google_api_key', 'xxx' ), MFB will automatically detect it. If you’re not adding the key this way, you can use this filter instead:

add_filter( 'acf/settings/google_api_key', fn( $key ) => 'your_key_here' );

Map height
The height of the map canvas is based on the height setting of your ACF Google Map field.

Editor preview
MFB doesn’t render the map preview inside the editor. It will show an empty canvas there instead.

Frontend display
On the frontend, the map will display a default marker at its center, with the address shown in an info window.

How to customize the map?

Add multiple markers
To display multiple markers, create a repeater field with map, title, and description subfields. Then use this sample code:

add_filter(
	'meta_field_block_google_map_markers',
	function( $markers, $raw_value, $field, $post_id, $object_type ) {
		$maps = get_field( 'maps_repeater', $post_id );
		if ( $maps ) {
			foreach ( $maps as $map ) {
				$markers[] = [
					'lat'  => $map['map']['lat'],
					'lng'  => $map['map']['lng'],
					'info' => '<h3>' . esc_html( $map['title'] ) . '</h3><p>' . esc_html( $map['description'] ) . '</p>',
				];
			}
		}
		return $markers;
	},
	10,
	5
);

Change the marker icon or map styles
Use the following filter to modify the marker image or map styling:

add_filter(
	'meta_field_block_google_map_settings',
	fn( $settings ) => [
		'marker' => 'https://url_to_custom_image/pin.png',
		'styles' => [
			[
				'featureType' => 'all',
				'elementType' => 'geometry.fill',
				'stylers'     => [ [ 'weight' => '2.00' ] ],
			],
			// ... your custom styles here ...
		],
	]
);

I recommend getting your map styles from Snazzy Maps.
Just remember to convert the JSON to PHP array format , ChatGPT can do this quickly for you.

Please let me know if you have any questions or need help with the setup.

Best, Phi.