Support

Account

Home Forums Gutenberg ACF Google Map in block? Reply To: ACF Google Map in block?

  • 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; ?>