Advanced custom fields map marker only pulling first post data?

I have a map set up with multiple markers being added from a custom post type named ‘countries’.

The map seems to work fine and pulls in the correct marker locations for each “country” post type. However, inside the marker’s info window, all the other info i have for the custom post types like title or a “short description” fields etc. are all being pulled from the latest post.

So basically when i click on a marker for an info window to appear, all the data inside the info window would be the same for all different markers. It would all be from the latest country i add.

See my code below:

<?php 
    $args = array(
        'post_type' => 'countries'
    );

    $location = new WP_Query($args);
?>

<div id="destinations-map">
    <div class="container-fluid">
        <div class="acf-map">

            <?php while($location->have_posts()) : $location->the_post(); ?>

            <?php $pin = get_field('map_location'); ?>
            <div class="marker" data-lat="<?php echo $pin['lat']; ?>" data-lng="<?php echo $pin['lng']; ?>">
                <div class="content">
                    <h2><?php the_title(); ?></h2>
                    <div class="separator"></div>
                    <p>
                        <?php the_field('short_description'); ?>
                    </p>

                    <div class="image">
                        <?php $map_img = get_field("map_image"); ?>
                        <img class="img-responsive" src="<?php echo $map_img['url']; ?>" alt="<?php echo $map_img['alt']; ?>">
                    </div>
                </div>
            </div> <!-- marker -->
            <?php endwhile; ?>
            <?php wp_reset_postdata(); ?>

        </div> <!-- acf-map -->
    </div>
</div> 

Now the strange thing to me is, if i don’t try to pull the info into the marker, all works fine and the data returned is correct! In other words, if i do the below, results are fine and as expected… Anybody could tell me why would i have this problem?

<div class="container">
    <?php while($location->have_posts()) : $location->the_post(); ?>
        <h2><?php the_title(); ?></h2>
        <?php $pin = get_field('map_location'); ?>
        <a href=""><?php echo $pin['lat']; ?></a>
        <a href=""><?php echo $pin['lng']; ?></a>
        <p>
            <?php the_field('short_description'); ?>
        </p>
    <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>
</div>