How to add ACF Google Map to frontend

Add single map marker

Add this to functions.php and replace the XXXXX to your Google Maps API key

function add_google_maps_scripts() {	
    wp_enqueue_script( 'google-map', 'https://maps.googleapis.com/maps/api/js?key=XXXXXXXXX', array(), '3', true );
	wp_enqueue_script( 'google-map-init', get_stylesheet_directory_uri() . '/js/acf-google-map.js',  array('google-map', 'jquery'), '0.1', true );
}
add_action( 'wp_enqueue_scripts', 'add_google_maps_scripts' );

//GOOGLE MAPS API KEY - Show the map in the admin
function my_acf_init() {
	
	acf_update_setting('google_api_key', 'XXXXXXXXX');
}

add_action('acf/init', 'my_acf_init');

Add this where you want to display the map

<div class="map">
           
            <?php $terkep = get_field('terkep');

                if( !empty($terkep) ): ?>
                
                <div class="acf-map">
                    <div class="marker" data-lat="<?php echo $terkep['lat']; ?>" data-lng="<?php echo $terkep['lng']; ?>"></div>
                </div>
                
                <?php endif; ?>
        </div>

Add this to style.css

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

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

Download the acf-google-maps.js here

Add multiple map marker

<?php 

$args = array(
        'post_type'      => 'xxxxxxx',
        'posts_per_page' => -1,
	);
    
    $the_query = new WP_Query($args);
    
    echo "
        <div class='map-container'>
            <div class='wrap'>
                <div class='acf-map'>";
        while ( $the_query->have_posts() ) : $the_query->the_post();
            $location = get_field('xxxxxxx');
            $title = get_the_title(); 
            if( !empty($location) ) {
        ?>

        	<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
                        <h4><a href="<?php the_permalink(); ?>" rel="bookmark"> <?php the_title(); ?></a></h4>
                        <p class="address"><?php echo $location['address']; ?></p>

        	</div>

<?php
        }
        endwhile; echo '
                </div>
            </div>
        </div>';

wp_reset_postdata();