Reply To: Display Maps on Front-End

• James

• December 16, 2016 at 11:12 am

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&#038;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 🙂