acf google map shortcode doesn't fit correctly in custom post type

I am facing a strange problem. I am building a website for renting apartments. I have created a custom post type “apartment”. I also use ACF to create custom fields for apartment features and address to be displayed on a Google map.

Following the instructions on ACF (https://www.advancedcustomfields.com/resources/google-map/) I succeeded to make a page with the map showing all the apartments. For this I created a shortcode containing the following php function which I added to a code block element

function locations_map (){
    
   $apartment_query = new WP_QUERY('post_type=apartment&posts_per_page=-1');
    if ( $apartment_query->have_posts() ) {
    ob_start(); ?>
    <div class="acf-map" style="overflow: hidden; position: relative;">
      <?php while ( $apartment_query->have_posts() ) {
        $apartment_query->the_post(); 
        $indirizzo = get_field('indirizzo');
        $title = get_the_title();
        $url = get_permalink();
        $posti_letto = get_field('posti_letto');
        $prezzo_minimo = get_field('prezzo_minimo');
        $type_icon =  'http://localhost:8888/mario/wp-content/themes/yaiv/images/marker-home.png';
        ?>
        <div class="marker" data-lat="<?php echo $indirizzo['lat']; ?>" data-lng="<?php echo $indirizzo['lng']; ?>" data-img ="<?php echo $type_icon; ?>">
            <div class="inside-marker">
              <h4><a href="<?php echo $url; ?>"><?php echo $title; ?></a></h4>
              <?php
                  echo '<span style="font-size:18px;">People ' . $posti_letto.'</span><br>';   
                  echo 'from '. $prezzo_minimo . '/night';
              ?>
          </div>
        </div>
    <?php } ?>
    </div>
    <?php wp_reset_postdata(); 
    }
    return ob_get_clean();
}
add_shortcode( 'locations_map', 'locations_map' );

The result, which is working fine, is as from the picture below

In frontend I wanted, for each apartment post (where descriptions and features are showed), a map displayed with the location of that single apartment. I hence prepared a second shortcode with the folowing php function

function single_map (){
$indirizzo = get_field('indirizzo');
$type_icon = 'http://localhost:8888/mario/wp-content/themes/yaiv/images/marker-home.png';
echo '<div class="acf-map" style="overflow: hidden; position: relative;">';
if( $indirizzo ): ?>
        <div class="marker" data-lat="<?php echo esc_attr($indirizzo['lat']); ?>" data-lng="<?php echo esc_attr($indirizzo['lng']); ?>" ></div>
<?php endif;         
echo '</div>';    
}
add_shortcode( 'single_map', 'single_map' );

However the problem is that when I add to the codeblock element the new [single_map], in frontend there is the proper map showed at the beginning of the .main container (with the marker working well), and a second map (with no marker and no correct center) in the codeblock, like the picture attached.

I did some trials and saw that also simple text shortcodes behave in the same way when added to the custom post type.

I also tried to deregister all Enfold native google map api scripts, but I had no results. Unfortunately the web site is still on my local machine, so I cannot give you access right now. Do you have any idea how to solve it?

• This topic was modified 3 years, 8 months ago by elenapoliti.