Advanced Custom Fields - Google Map Won't Render Unless Variable Dumped

Question

I'm trying to display the Google Map object created using the Advanced Custom Field plugin's built-in generator.

I used the stock Javascript/CSS/PHP outlined here as this exactly matches my use case: https://www.advancedcustomfields.com/resources/google-map/

Only problem: The jQuery script seems unable to find the lat/lng html attributes unless the php variable is dumped or echoed in some way.

<div class="map">
    <?php 
        $location = get_field('location');
        var_dump($location); <-- Why is this necessary?
    ?>
        <div class="acf-map">
            <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
        </div>
</div>

My knowledge of PHP is clearly inadequate to understand why this might be the case. The Javascript is being included in an inline script tag within the PHP file itself.

Answer 1

Try this code:

<div class="map">
    <?php 
        global $post;
        $location = get_field('location', $post->ID);
    ?>
        <div class="acf-map">
            <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
        </div>
</div>

Sometimes in the template you're loading this you don't have the post that the field belongs to, so you can try to fetch it in the global $post variable.