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; ?>
Okay, it’s really because there are commas instead of points in position “lat” and “lgn”…
Any ideas ?
Best
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
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
Hi @jez,
you found a solution.
But you use option and not gutenberg block, I’m right ?
Best.
Pierre
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>
I’ve verified, adress is correct but markers aren’t at the right place…
Any ideas ?
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
Hello I don’t know why problem comes from CPTUI, if I code by myself the custom post type all works like a charm, but with CPTUI it doesn’t work…
@davenoham,
for sure you helped me a lot and solved two issues, pages color and menu items color.
Take care too.
Pierre
@davenoham,
that’s not what I had in mind, but your solution works like a charm for my pages and also my menu.
Thank you so much !
Have a nice day.
Pierre
Yes I will have a try, I’ll keep you in touch.
Thank you for your help ;-).
@davenoham,
Yes my values are saved when I press the uptdate button on theme options :
Ok, I understand, I think your solution could work.
I don’t have to populate my fields to pages or menu items.
I just need to create new select fields which will correspond to classes.
With your solution If I want to create a new color, I need to create also a new field on option pages then a on ACF color field for pages and on on ACF color field for menu items.
At the beginning I would like to create only one field for pages and menu with as much colors as I want, that’s why I choose a repeater field.
I can tell to the client “you have 5 colors for your menu items and your pages and that’s all” ;-).
For this project I can test your solution, but I’m curious on the fact to populate avec save an option field ;-).
I’ll keep you in touch.
@davenoham,
I looked at your function, and I don’t understand what I’m doing wrong.
All seem to be ok, but when I change a color in options, it didn’t update the Hex color code in data base, I need to update each pages corresponding to color 1 to make it work.
Hey @davenoham,
thank you to take on your time to answer.
I just tried key=key=field_5fc8ec7039ff2’ instead of ‘name=couleur_page’, the result is the same but I’ll keep key=field_5fc8ec7039ff2, because it’s more safe if I change field name.
I’ll analyse the code you gave me so as to apply to my fields.
I’ll keep you in touch soon.
Thanks again ;-).
Hello @davenoham,
thanks for your answer, it’s very kind to propose to help me on my project.
Congratulations for your web to print project ;-).
Here is the new thread with my issues :
https://support.advancedcustomfields.com/forums/topic/populate-select-color-from-option-to-a-page/
Best regards.
Pierre
Hi @tjmorris81,
did you solved it ?
I have the same issue when I update option field, it deletes my choice select on my page…
Thank you.
Best
Sometimes you have to take a step back…
name=menu_color wasn’t the right ACF field…
Sorry.
Hello,
nobody can help me on this ?
Best.
Hello,
nobody can help me on this ?
Best.
I reach to display color on the ancestor with the function start_el but not to the sub-menu div and add ACF column class to column ul…
function start_el(&$output, $item, $depth=0, $args=array(), $id = 0) {
$object = $item->object;
$type = $item->type;
$title = $item->title;
$description = $item->description;
$permalink = $item->url;
$color = get_field('couleur_menu', $item->ID);
$output .= "<li class='" . implode(" ", $item->classes) ."' style=background-color:".$color.">";
}
How can I do something close with function start_lvl ?
