![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: acf, enfold, google maps
-
AuthorPosts
-
March 12, 2021 at 4:39 pm #1287765
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, 6 months ago by
elenapoliti.
March 12, 2021 at 4:57 pm #1287774I solved the problem! Sorry for bothering. The correct way to show a shortcode is to use $output and return it, as the following code
function single_map (){ $indirizzo = get_field('indirizzo'); $type_icon = 'http://localhost:8888/mario/wp-content/themes/yaiv/images/marker-home.png'; $output = '<div class="acf-map" style="overflow: hidden; position: relative;">'; if( $indirizzo ): $output .= '<div class="marker" data-lat="'; $output .= esc_attr($indirizzo['lat']).'"'; $output .='data-lng="'; $output .= esc_attr($indirizzo['lng']).'" ></div>"'; endif; $output .= '</div>'; return $output; } add_shortcode( 'single_map', 'single_map' );
Hence you can close the ticket (maybe the code is useful to somebody else)
March 13, 2021 at 2:15 pm #1287982Hi elenapoliti,
Great :)
We are closing the thread.
If you need further assistance please let us know in a new one.
Best regards,
Victoria -
This topic was modified 3 years, 6 months ago by
-
AuthorPosts
- The topic ‘acf google map shortcode doesn't fit correctly in custom post type’ is closed to new replies.