Home › Forums › Front-end Issues › Display Maps on Front-End › Reply To: Display Maps on Front-End
Hi @serviceweb
I’ve just tried to fix the map on your site, but I created a mistake there. I’m really sorry about that.
The issue you had was that you were trying to get the maps from the current page (luoghi-padre-pio) by using this code:
$location = get_field('mappa_santo');
But your Google Map field is located in posts with a category of “I luoghi di Padre Pio”. The correct way to get the markers for this situation is to loop through the posts and get the Google Map values like this:
$map_posts = get_posts(array(
'post_type' => 'post',
'cat' => '8'
));
if( $map_posts ): ?>
<div class="acf-map">
<?php foreach( $map_posts as $map_post ) :
$location = get_sub_field('location', $map_post->ID);
?>
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
<h4><?php the_sub_field('title'); ?></h4>
<p class="address"><?php echo $location['address']; ?></p>
<p><?php the_sub_field('description'); ?></p>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
With that code, I successfully made the maps and the location show up on the page. But the map only shows a blue background. When I checked the source, the script somehow has the wrong encoding:
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=XXXXXXXX-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&ver=3'></script>
As you can see it uses “&” instead of “?”. So I tried to add the script manually like this:
/* API Maps */
function my_theme_add_scripts() {
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=XXXXXXXX-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX?ver=3'></script>
<script type='text/javascript' src='http://padrepio.hellonetlab.it/wp-content/themes/theworld-child/library/js/google-maps.js?ver=0.1'></script>
}
add_action( 'wp_enqueue_scripts', 'my_theme_add_scripts' );
Unfortunately, I forgot the PHP opening and closing tag there. Could you please access the functions.php file using FTP client and change it to:
/* API Maps */
function my_theme_add_scripts() {
?>
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=XXXXXXXX-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX?ver=3'></script>
<script type='text/javascript' src='http://padrepio.hellonetlab.it/wp-content/themes/theworld-child/library/js/google-maps.js?ver=0.1'></script>
<?php
}
add_action( 'wp_enqueue_scripts', 'my_theme_add_scripts' );
Once again, I’m sorry about that.
Thanks 🙂
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
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 Privacy Policy. If you continue to use this site, you consent to our use of cookies.