Google Map with Multiple Markers in Genesis using ACF Pro

functions.php

<?php 

add_action( 'init', 'register_cpt_locations' );
/**
 * Create Locations custom post type
 */
function register_cpt_locations() {
	$labels = array(
		'name' => __( 'Locations', 'locations' ),
		'singular_name' => __( 'Location', 'locations' ),
		'add_new' => __( 'Add New', 'locations' ),
		'add_new_item' => __( 'Add New Location', 'locations' ),
		'edit_item' => __( 'Edit Locations', 'locations' ),
		'new_item' => __( 'New Location', 'locations' ),
		'view_item' => __( 'View Location', 'locations' ),
		'search_items' => __( 'Search Locations', 'locations' ),
		'not_found' => __( 'No locations found', 'locations' ),
		'not_found_in_trash' => __( 'No locations found in Trash', 'locations' ),
		'parent_item_colon' => __( 'Parent Location:', 'locations' ),
		'menu_name' => __( 'Locations', 'locations' ),
	);
	$args = array(
		'labels' => $labels,
		'hierarchical' => false,
		'description' => 'Custom Post Types for locations.',
		'supports' => array( 'title' ),
		'public' => true,
		'show_ui' => true,
		'show_in_menu' => true,
		'menu_position' => 20,
		'menu_icon' => 'dashicons-location-alt',
		'show_in_nav_menus' => true,
		'publicly_queryable' => true,
		'exclude_from_search' => true,
		'has_archive' => true,
		'query_var' => true,
		'can_export' => true,
		'rewrite' => true,
		'capability_type' => 'post'
	);
	register_post_type( 'locations', $args );
}

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

function io_enqueue_locations() {
	wp_enqueue_script( 'locations', get_stylesheet_directory_uri() . '/js/map.js', array( 'jquery' ), '', true );

	wp_enqueue_script( 'google-maps-api', '//maps.googleapis.com/maps/api/js?key=REPLACE_WITH_YOUR_GOOGLE_MAPS_API', array(), '', true );

	wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' );
}

map.js

/* Google Maps */
(function($) {

function render_map( $el ) {
    
    // var
    var $markers = $(document).find('.marker');
   
    // vars
    var args = {
        zoom        : 16,
        center      : new google.maps.LatLng(0, 0),
        mapTypeId   : google.maps.MapTypeId.ROADMAP,
        scrollwheel: false,
        mapTypeControlOptions: {
          mapTypeIds: [google.maps.MapTypeId.ROADMAP]
        }
    };

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

    // add a markers reference
    map.markers = [];
    // add markers
    index=0;
    $markers.each(function(){
        add_marker( $(this), map, index);
        index++;
    });
   
    // center map
    center_map( map );

    }
    
function add_marker( $marker, map, index ) {

    // var
    var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
    var image = new google.maps.MarkerImage("http://test.dev/wp-content/themes/genesis-sample/images/marker.png", null, null, null, new google.maps.Size(25,30));

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

    // add to array
    map.markers.push( marker );
    
    
    // if marker contains HTML, add it to an infoWindow
    if( $marker.html() )
    {
        $('#listdata').append('<div class= "linkage" id="p'+index+'">'+$marker.html()+'</div>'); // change html here if you want but eave id intact!!
         
        $(document).on('click', '#p'+index, function(){
            infowindow.open(map, marker);
            setTimeout(function () { infowindow.close(); }, 5000);
        });
      
        // 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 );

        });

    }

}

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
        alert(bounds);
        map.setCenter( bounds.getCenter() );
        map.setZoom( 16 );
    }
    else
    {
        // fit to bounds
        map.fitBounds( bounds );
    }

}

// Call it


  $(document).ready(function(){

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

        render_map( $(this) );

    });

});


})(jQuery);

page_locations.php

<?php
/* Template Name: Locations */

add_filter( 'body_class', 'io_body_class' );
/**
 * Adds a css class to the body element
 *
 * @param  array $classes the current body classes
 * @return array $classes modified classes
 */
function io_body_class( $classes ) {
	$classes[] = 'locations-page';
	return $classes;
}

// Force full width content
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

//* Remove Content
remove_action( 'genesis_loop', 'genesis_do_loop' );

// http://stackoverflow.com/questions/26866063/google-maps-link-to-marker-from-outside-map
// http://jsfiddle.net/dheffernan/3xkuybrf/
add_action( 'genesis_after_header', 'io_location' );
function io_location() {
	
	// accepts any wp_query args
	$args = (array(
		'post_type'      => 'locations',
		'order'          => 'ASC',
		'orderby'       => 'title',
		'posts_per_page' => -1
	));

	// The Query
	$the_query = new WP_Query( $args );

	// The Loop
	if ( $the_query->have_posts() ) {
		echo '<div class="locations"><div class="acf-map"></div>';

		echo '<div id="listdata"></div><div id="newdiv">';
		while ( $the_query->have_posts() ) {
			$the_query->the_post();

				$address = get_field( 'location_address' );
			    $contact_number = get_field( 'location_phone_number' );
			    $opening_hours = get_field( 'location_opening_hours' );
					printf( '<div class="marker" data-lat="%s" data-lng="%s">
						<h4 class="title">%s</h4>
							<div class="address"><i class="fa fa-map-marker" aria-hidden="true"></i> %s
							<a href="" target="_blank" class="website" title="%s"></a>
							<div class="address-item"><i class="fa fa-phone" aria-hidden="true"></i> %s</div>
							<div class="address-item">%s</div>
							</div>
						</div>',
			     $address['lat'],
			     $address['lng'],
			     get_the_title(),
			     $address['address'],
			     get_the_title(),
			     $contact_number,
			     $opening_hours);
		}

		echo '</div></div>';

		/* Restore original Post Data */
		wp_reset_postdata();
	} else {
		// no posts found
	}

}

// Enqueue map.js, fontawesome & google maps API Key
add_action( 'wp_enqueue_scripts', 'io_enqueue_locations' );

genesis();

style.css

/* # Locations page
---------------------------------------------------------------------------------------------------- */
.locations-page .site-inner {
	padding: 0;
}

.acf-map {
	width: 100%;
	height: 600px;
}

/* fixes potential theme css conflict */
.acf-map img {
   max-width: inherit !important;
}

.locations {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.locations *:nth-of-type(1) {
    -ms-flex-preferred-size: 69%;
        flex-basis: 69%;
}

.locations *:nth-of-type(2) {
    -ms-flex-preferred-size: 29%;
        flex-basis: 29%;
}

#newdiv {
    display: none;
}

#listdata {
    overflow: scroll;
    height: 600px;
}

.linkage {
    cursor: pointer;
    border-bottom: 1px dashed;
    margin: 40px 40px 0 20px;
}

.linkage:nth-last-of-type(1) {
	border: none;
}

.fa-map-marker {
    color: #fdcf41;
}

.fa-phone {
    color: #34bb00;
}

@media only screen and (max-width: 1024px) {
	.locations *:nth-of-type(1),
	.locations *:nth-of-type(2) {
	    -ms-flex-preferred-size: 100%;
	        flex-basis: 100%;
	}

	#listdata {
		height: auto;
		overflow: visible;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-flow: row wrap;
		    flex-flow: row wrap;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
	}

	#listdata * {
		-ms-flex-preferred-size: 49%;
		    flex-basis: 49%;
	}

	.linkage {
		margin: 0;
		padding: 40px 40px 0 20px;
	}

	.linkage:nth-last-of-type(2) {
		border-bottom: none;
	}
}

@media only screen and (max-width: 640px) {
	#listdata * {
		-ms-flex-preferred-size: 100%;
		    flex-basis: 100%;
	}

	.linkage:nth-last-of-type(2) {
		border-bottom: 1px dashed;
	}
}