ACF Google Maps - Multiple Pins

Question

I'm using ACF Fields plugin and attempting to create a Google Map which shows post locations, but not getting very far - the pins show up in the wrong places, and when I echo out the title of the post in the HTML bubble above the pin, it's always the same post.. but in 3 different places. I only have 2 out of 10 posts with locations at the moment, so I have no idea why 3 places are being shown.. One is in the middle of the ocean as well. However, this is the closest I've come, and I've wasted the whole day trying...

<div class="acf-map">
<?php while ( $wp_query->have_posts() ) : $wp_query->the_post();?>

<?php $location = get_field('location_map'); ?>
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>

<?php endwhile; wp_reset_postdata();?>
</div>

I'd have thought this would be relatively simple to achieve, but I guess not.. but then I'm far from the best coder in the world :)

If anyone can give me any pointers on this, I'd be most grateful!

Answer 1

I've achieved this in the following website

check the "Ubicación" bock. I did this using ACF Pro (5.0). Im sharing you the code you need in order to implement this. Hope this is what you are looking for (there are a few extra fields that are not needed).

    <?php 

    $image = get_field('location_background_image', 'option');
    $size = 'background';
    $location_background_image_url = $image['sizes'][ $size ];

    ?>

    <section id="location" class="location-section" style="<?php if( get_field('location_background_color','option') ): ?>background-color:<?php the_field('location_background_color','options'); ?>;<?php endif; ?><?php if( get_field('location_background_image','option') ): ?>background-image:url(<?php echo $location_background_image_url; ?>); background-size:cover;<?php endif; ?>">

        <div class="container scrollpoint sp-effect3">

          <?php if( get_field('location_title','option') ): ?><h1 class="text-center"><?php the_field('location_title','options'); ?></h1><?php endif; ?>

          <?php if( get_field('location_description','option') ): ?>

              <div id="location-description" class="text-center"><?php the_field('location_description','options'); ?></div>

          <?php endif; ?>

            <style type="text/css">

            .acf-map {
              width: 100%;
              height: 400px;
              border: #ccc solid 1px;
              margin: 40px 0;
            }

            </style>
            <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

            <?php if( have_rows('locations','options') ): ?>
              <div class="acf-map">
                <?php while ( have_rows('locations','options') ) : the_row(); 

                  $location = get_sub_field('location');

                  ?>
                  <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
                    <h4><?php the_sub_field('title'); ?></h4>
                    <p><?php the_sub_field('description'); ?></p>
                  </div>
              <?php endwhile; ?>
              </div>
            <?php endif; ?>

        </div> <!-- .container -->

    </section> <!-- section#location -->

    <div class="section-divider blue">

      <a class="scroll" href="#responsability"><i class="fa fa-angle-down fa-3x"></i></a>

    </div> <!-- .section-divider blue -->