Betiok
5/20/2017 - 4:34 PM

ACF Google Map

ACF Google Map

function my_acf_init() {
	acf_update_setting('google_api_key', 'AIzaSyBjczDQ0CHAV9SUiCKx-rH4wlR4EZF5OgU');
}

add_action('acf/init', 'my_acf_init');
google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
    $('.gm-style-iw').prev('div').remove();
});
<?php if(get_field('global_address', 'option')): ?>
	<?php
		$location = get_field('global_address', 'option');
		$address = $location['address'];
	?>

	<div class="col first">
		<p>
			<?php if(get_field('global_address_custom', 'option')): ?>
				<?php the_field('global_address_custom', 'option'); ?>
			<?php else: ?>
				<?php echo $address; ?>
			<?php endif; ?>
		</p>

		<a class="btn-directions" href="https://www.google.com/maps/place/<?php echo $address; ?>" target="_blank">
			<?php _e('Get Directions', 'html5blank'); ?>
		</a>
	</div>
<?php endif; ?>
.acf-map {
    width: 100%;
    height: 300px;
}

.acf-map .gmnoprint,
.acf-map .gm-style-cc {
    display: none;
}
<?php if( get_field('contact_location', 'option') ): ?>
    <?php $location = get_field('contact_location', 'option'); ?>

    <div class="acf-map">
        <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
    </div>
<?php endif; ?>
(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 $markers = $el.find('.marker');

        var args = {
            zoom		: 11,
            center		: new google.maps.LatLng(0, 0),
            mapTypeId	: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false,
            styles: []
        };

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

        google.maps.event.addListener(map, 'tilesloaded', function() {
            $('.acf-map').find('img').attr('data-pin-nopin','true');
        });

        // 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 latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));

        // create marker
        var marker = new google.maps.Marker({
            icon: '/wp-content/themes/custom-theme/img/pin.png',
            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 ) {
        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(11);
        } 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
    */
    
    var map = null;

    $(document).ready(function(){
        $('.acf-map').each(function(){
            map = new_map($(this));
        });
    });
})(jQuery);
<?php if( get_field('projects') ): ?>
    <div class="acf-map">
        <?php $projects = get_field('projects'); ?>

        <?php foreach($projects as $post): // variable must be called $post (IMPORTANT) ?>
            <?php setup_postdata($post); ?>

            <?php if( get_field('address') ): ?>
                <?php $location = get_field('address'); ?>

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

                    <p class="address">
                        <?php echo $location['address']; ?>
                    </p>
                </div>
            <?php endif; ?>
        <?php endforeach; ?>

        <?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
    </div>
<?php endif; ?>
if (is_page_template('template-contact.php')) {
    wp_register_script('googlemapapi', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBjczDQ0CHAV9SUiCKx-rH4wlR4EZF5OgU&extension=.js', array('jquery'), '1.0.0');
    wp_enqueue_script('googlemapapi');

    wp_register_script('location', get_template_directory_uri() . '/js/map.js', array('jquery'), '1.0.0');
    wp_enqueue_script('location');
}