0

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!

Improve this question
3
  • 1
    You should wrap that all in an if ( $wp_query->have_posts() ) so that you don't call wp_reset_postdata() if there are no posts found. You should also verify that $location is an array and not an error value, and that the keys 'lat' and 'long' actually exist, if either of those assumptions fail you'll get warnings and notices in your error log or on the page – Tom J Nowell♦ Apr 25 '15 at 16:59
  • Hi Tom! Thanks for the advice, cheers :) What I know is that the fields exist and I can echo out longitude and latitude in the loop with the rest of the post data (title, etc). I'm just stuck as to how I get that data from there into a <div> at the top of the page where the map is. This is essentially a property website, which may give you an idea as to what I'm trying to pull off. Hope how I described my issue made sense :) – chrsmrtn81 Apr 25 '15 at 17:25
  • You shouldn't assume, and should always check, what if $location['lat'] contains "><script>dangerous_javascript();</script><span data="? You should do some debugging and show us exactly what the contents of $location is, as well as an if statement with an else case so we can see when no posts were found. Lets ignore what should and shouldn't, if things were as they should, you wouldn't have opened this question – Tom J Nowell♦ Apr 26 '15 at 18:32
0

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 -->
Improve this answer
2
  • @tom I don't suppose you're much of an ACF user - I know what's contained in $location - longitude, latitude and address. Anyhow, appreciate your input, cheers! – chrsmrtn81 Apr 27 '15 at 21:13
  • Johann - I think I'll be going down this route. It looks like you used a repeater field for this, which had crossed my mind to use, so will give it a go this way :) – chrsmrtn81 Apr 27 '15 at 21:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.