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.
Hope its a help.
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; ?>
