Advanced Custom Fields: Repeater with Google Map with markers

digico-custom.js

// ACF Google Maps Rendering
(function ($) {

    /*
     *  new_map
     *
     *  This function will render a Google Map onto the selected jQuery element
     *
     *  @type	function
     *  @date	8/11/2013
     *  @since	4.3.0
     *
     *  @param	$el (jQuery element)
     *  @return	n/a
     */

    function new_map($el) {

        // var
        var $markers = $el.find('.marker');


        // vars
        var args = {
            zoom: 16,
            center: new google.maps.LatLng(0, 0),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };


        // create map	        	
        var map = new google.maps.Map($el[0], args);


        // add a markers reference
        map.markers = [];


        // add markers
        $markers.each(function () {

            add_marker($(this), map);

        });


        // center map
        center_map(map);


        // return
        return map;

    }

    /*
     *  add_marker
     *
     *  This function will add a marker to the selected Google Map
     *
     *  @type	function
     *  @date	8/11/2013
     *  @since	4.3.0
     *
     *  @param	$marker (jQuery element)
     *  @param	map (Google Map object)
     *  @return	n/a
     */

    function add_marker($marker, map) {

        // var
        var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));

        // create marker
        var marker = new google.maps.Marker({
            position: latlng,
            map: map
        });

        // add to array
        map.markers.push(marker);

        // if marker contains HTML, add it to an infoWindow
        if ($marker.html()) {
            // create info window
            var infowindow = new google.maps.InfoWindow({
                content: $marker.html()
            });

            // show info window when marker is clicked
            google.maps.event.addListener(marker, 'click', function () {

                infowindow.open(map, marker);

            });
        }

    }

    /*
     *  center_map
     *
     *  This function will center the map, showing all markers attached to this map
     *
     *  @type	function
     *  @date	8/11/2013
     *  @since	4.3.0
     *
     *  @param	map (Google Map object)
     *  @return	n/a
     */

    function center_map(map) {

        // vars
        var bounds = new google.maps.LatLngBounds();

        // loop through all markers and create bounds
        $.each(map.markers, function (i, marker) {

            var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());

            bounds.extend(latlng);

        });

        // only 1 marker?
        if (map.markers.length == 1) {
            // set center of map
            map.setCenter(bounds.getCenter());
            map.setZoom(16);
        } else {
            // fit to bounds
            map.fitBounds(bounds);
        }

    }

    /*
     *  document ready
     *
     *  This function will render each map when the document is ready (page has loaded)
     *
     *  @type	function
     *  @date	8/11/2013
     *  @since	5.0.0
     *
     *  @param	n/a
     *  @return	n/a
     */
    // global var
    var map = null;

    $(document).ready(function () {

        $('.acf-map').each(function () {

            // create map
            map = new_map($(this));

        });

    });

})(jQuery);

functions.php

// Set up project and API credentials to utilize Google Maps and Places APIs

function my_acf_init() {	
	acf_update_setting('google_api_key', 'XXX');
}
add_action('acf/init', 'my_acf_init');

header.php

// Also insert the API key reference into this file before wp_head()

<script src="https://maps.googleapis.com/maps/api/js?key=XXX"></script>

page-template.php

<?php if( have_rows('repeater field name', 'option') ) : ?>
    // MUST use the "acf-map" and "marker" classes
    <div class="acf-map">
        <?php while ( have_rows('repeater field name', 'option') ) : the_row();
            $location = get_sub_field('address');
            $locTitle = get_sub_field('title');
            $address = $location['address'];
            $dir = str_replace(',', '', $address);
            $directions = str_replace(' ', '+', $dir);
            // Find the first comma and replace it with a break
            $string = strpos($address,',');
            if ($pos !== false) {
                $newstring = substr_replace($address,'<br>',$string,strlen(','));
            }
            // Find the "US" at the end of the string
            $us = ', USA';
            // And drop it from the Address
            $trimmedAdd = str_replace($us, '', $newstring);
            ?>
        <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
            <div class="title">
                <?php echo $locTitle; ?>
            </div>
            <p class="address">
                <?php echo $trimmedAdd; ?>
            </p>
            <a href="https://www.google.com/maps/dir/?api=1&destination=<?php echo $directions; ?>" target="_blank" class="main-button">
                Get Directions
            </a>
        </div>
        <?php endwhile; ?>
    </div>
<?php endif; ?>

style.css

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