Is it a know bug that previewing the google map within a Gutenberg block in the admin doesn’t load the map?
Is it something to do with iFrames being stripped out?
Hi @jez,
did you found a solution ?
I’m working on this too without success.
All is ok in the back end but on the front markers of both maps are at the same place…
If I var_dump( $place ) before displaying maps, lat/lng are not the same but markers still are at the same place…
Best
Pierre
I’ve verified, adress is correct but markers aren’t at the right place…
Any ideas ?
Here is my var_dump:
array(14) { [« address »]=> string(49) « Tour Eiffel, Avenue Anatole France, Paris, France » [« lat »]=> float(48,8583701) [« lng »]=> float(2,2944813) [« zoom »]=> int(22) [« place_id »]=> string(27) « ChIJLU7jZClu5kcR4PcOOO6p3I0 » [« name »]=> string(11) « Tour Eiffel » [« street_number »]=> string(1) « 5 » [« street_name »]=> string(21) « Avenue Anatole France » [« city »]=> string(5) « Paris » [« state »]=> string(14) « Île-de-France » [« state_short »]=> string(3) « IDF » [« post_code »]=> string(5) « 75007 » [« country »]=> string(6) « France » [« country_short »]=> string(2) « FR » }
So as to marker works I would need lat and lng with points instead of commas :
<div class="marker" data-lat="48.8583701" data-lng="2.2944813"></div>
Here is a link to my full front end Google map display with the various ACFs.
Hi @jez,
you found a solution.
But you use option and not gutenberg block, I’m right ?
Best.
Pierre
Hi again,
here is my block code:
<?php
$id = 'gmap-' . $block['id'];
if( !empty($block['anchor']) ) {
$id = $block['anchor'];
}
$className = 'gmap-block';
if( !empty($block['className']) ) {
$className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
$className .= ' align' . $block['align'];
}
$place = get_field( 'gmap' );
if( $place ):
$lat = esc_attr( $place['lat'] );
$lng = esc_attr( $place['lng'] );
$zoom = esc_attr( $place['zoom'] );
?>
<div id="<?php echo esc_attr($id); ?>" class="acf-map" data-zoom="8">
<div class="marker" data-lat="<?php echo $lat; ?>" data-lng="<?php echo $lng; ?>"></div>
</div>
<?php endif; ?>
And I used js from documentation.
I really don’t fid what I’m doing wrong…
Any help is appreciated.
Best.
Pierre
Hello,
here are screenshots of gutenberg block and how it renders on front.
I choose Tour Eiffel, Avenue Anatole France, Paris, France on back and it renders somewhere far from Paris close to Orleans while as you can see with var_dump all seems to be ok…
Back :
Front :
Thanks again to the community for your support.
Best
Pierre
Okay, it’s really because there are commas instead of points in position “lat” and “lgn”…
Any ideas ?
Best
Hello everybody,
I proud to found a solution by myself ;-).
I share it if someone would like to use ACF Gmap as a Gutenberg Block.
You can close the thread.
Here is my block code.
Best.
Pierre
<?php
/**
* Gmap Block Template.
*
* @param array $block The block settings and attributes.
* @param string $content The block inner HTML (empty).
* @param bool $is_preview True during AJAX preview.
* @param (int|string) $post_id The post ID this block is saved to.
*/
// Create id attribute allowing for custom "anchor" value.
$id = 'gmap-' . $block['id'];
if( !empty($block['anchor']) ) {
$id = $block['anchor'];
}
// Create class attribute allowing for custom "className" and "align" values.
$className = 'gmap-block';
if( !empty($block['className']) ) {
$className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
$className .= ' align' . $block['align'];
}
$place = get_field( 'gmap' );
if( $place ):
$lat = esc_attr( $place['lat'] );
$lng = esc_attr( $place['lng'] );
$zoom = esc_attr( $place['zoom'] );
$place_lat = str_replace( ',', '.', $lat);
$place_lgn = str_replace( ',', '.', $lng);
?>
<div id="<?php echo esc_attr($id); ?>" class="acf-map" data-zoom="<?php echo $zoom; ?>">
<div class="marker" data-lat="<?php echo $place_lat; ?>" data-lng="<?php echo $place_lgn; ?>"></div>
</div>
<?php endif; ?>
The topic ‘ACF Google Map in block?’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.