Support

Account

Home Forums Gutenberg ACF Google Map in block?

Solving

ACF Google Map in block?

    • jez

    • March 12, 2020 at 10:29 pm

    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?

    • Trint33

    • March 24, 2021 at 3:23 am

    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

    • Trint33

    • March 24, 2021 at 7:19 pm

    I’ve verified, adress is correct but markers aren’t at the right place…
    Any ideas ?

    • Trint33

    • March 24, 2021 at 8:23 pm

    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>

    • jez

    • March 24, 2021 at 8:29 pm

    Here is a link to my full front end Google map display with the various ACFs.

    Hope its a help.

    • Trint33

    • March 24, 2021 at 8:32 pm

    Hi @jez,
    you found a solution.
    But you use option and not gutenberg block, I’m right ?
    Best.
    Pierre

    • Trint33

    • March 25, 2021 at 2:52 am

    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

    • Trint33

    • March 25, 2021 at 8:05 pm

    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 :
    Gmap Back
    Front :
    Gmap Front

    Thanks again to the community for your support.

    Best
    Pierre

    • Trint33

    • March 26, 2021 at 7:51 pm

    Okay, it’s really because there are commas instead of points in position “lat” and “lgn”…
    Any ideas ?

    Best

    • Trint33

    • March 26, 2021 at 8:43 pm

    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; ?>
Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

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 Cookie Policy. If you continue to use this site, you consent to our use of cookies.