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 -->